valign:bottom CSS?

8 отговора 0 прегледа
#1

valign:bottom CSS?

<fieldset><legend>бла бла бла</legend>
<div>1</div> <div>2</div>
<div>3</div
</fieldset>

1 - този е в ляво и му знам височината
2 - този е отдясно, но височината му се мени според съдържанието. Може да е по-голяма или по-малка спрямо левия
3 - Тоя див го искам долу и в дясно винаги

Някаква идея как да стане с ЦСС?

Отговор
в отговор на slavei #2

Re: valign:bottom CSS?

Така?
<div style="clear: both;">3</div>

Отговор
в отговор на _Jacky #3

Re: valign:bottom CSS?

Става, но понеже го слага под див1 и под него остава празно място, колкото е височината на див3. Просто не ме кефи.

Отговор
в отговор на Slavei #4

Re: valign:bottom CSS?

е не можеш ли да му зададеш малко по голяма широчина от тази на 1. като например width:100%;?

'In this life we cannot do great things. We can only do small things with great love'
Отговор
в отговор на sularome #5

Re: valign:bottom CSS?

Не те разбрах. Защо трябва да му задавам по-голяма ширина?

Отговор
в отговор на Slavei #6

Re: valign:bottom CSS?

...добре, това ли е или аз бъркам?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[линк]">
<html xmlns="[линк]">
<head>
<title>Ex.</title>
<style>
*{
padding:0;
margin:0;

}
div{border:1px solid #000;}
fieldset{width:124px;}
#one{
width:50px;
float:left;
background:red
}
#two{
width:70px;
float:right;
background:blue
}
#three{
width:40px;
float:right;
clear:both;
background:green
}
</style>
</head>
<body>
<fieldset><legend>Ex.</legend>
<div id="one">1</div>
<div id="two">2<br /><br /><br /><br /><br /><br /><br /><br />end</div>
<div id="three">3</div>
</fieldset>
</body>
</html>


'In this life we cannot do great things. We can only do small things with great love'
Отговор
в отговор на sularome #7

Re: valign:bottom CSS?

Rазмени само името на двата стила one и two там дето са декларирани.
Див1 и див2 се разменят, но това няма значение за примера. Погледни как изглежда в браузъра и ще видиш разстоянието, което остава под див2. За това говорех в предният пост адресиран до теб

всъщност ето картинка:


Отговор
в отговор на Slavei #8

Re: valign:bottom CSS?

сега вече мисля че се разбрахме

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"[линк]">
<html xmlns="[линк]">
<head>
<title>Ex.</title>
<style>
*{
padding:0;
margin:0;
}
#outer{
width:120px;
border:1px solid #000;
}
#one{
width:50px;
float:left;
background:red
}
#two{
width:70px;
float:right;
background:blue;
}
#three{
width:40px;
height:22px;
background:green;
float:right;
margin-top:-22px;
position:relative;
}
#clearing{clear:both;}
</style>
</head>
<body>
<div id="outer">
<div id="two">1</div>
<div id="one">2<br /><br /><br /><br /><br /><br /><br /><br />end</div>
<div id="clearing">
<div id="three">3</div>
</div>
</div>

</body>
</html>


'In this life we cannot do great things. We can only do small things with great love'

Редактирано от sularome на

Отговор
в отговор на sularome #9

Re: valign:bottom CSS?

Да това искам :)
Благодаря, задължен съм ти

пп
малко се омазва със моите стилове за див 1, ама с един <бр/> се оправи.

Отговор