| Deff | 14.06.2012 14:30 |
Ну терь у чела есть большой выбор
Выравнивания DIVов по высоте
Здравствуйте.
Имеется <div id="apDiv1"> и <div id="apDiv2"> Они стоят рядышком и имеют фиксированную ширину. <div id="apDiv1"> заполняется текстом (его высота зависит от количества строк текста). Как сделать так, чтобы высота второго дива (<div id="apDiv2">) автоматически становилась равной высоте первого дива? Необходимо, чтобы они вели себя подобно таблице с двумя ячейками. |
Цитата:
<style>
.row {
display: table-row;
}
.row div {
display: table-cell;
border: 1px solid #000;
width: 150px;
/* какашка для ИЕ7 эмулирует table-cell */
height: expression((function(t,i,h,e){
i=h=e=0;t.style.styleFloat='left';while(e=t.parentNode.children[i++]){h=(e.offsetHeight>h?e.offsetHeight:h)};
return(h-(parseInt(t.currentStyle.borderTopWidth)||0)-(parseInt(t.currentStyle.borderBottomWidth)||0)-
(parseInt(t.currentStyle.paddingTop)||0)-(parseInt(t.currentStyle.paddingBottom)||0))+"px"
})(this));
}
</style>
<div class="row">
<div>
many text here lala<br/>
many text here lala<br/>
many text here lala<br/>
many text here lala<br/>
many text here lala<br/>
many text here lala<br/>
many text here lala<br/>
</div>
<div>23</div>
</div>
|
Если нужно именно то что описано, то нужно просто засунуть первый во второй и спозиционировать как надо.)
|
http://www.xiper.net/collect/html-an...oy-visoty.html.
2 способ ,для меня,самый удобный |
На js можно, например, так (для кроссбраузерности добавить эмуляцию getElementsByClassName и getComputedStyle)
<style>
.left {
width: 20%;
background: lightgrey;
margin: 2%;
float: left;
}
.right {position: relative;
width: 20%;
background: red;
margin: 2%;
float: left;
}
</style>
<div class='left'>
left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left
</div>
<div class='right'></div>
<div style="clear: both"></div>
<div class='left'>
left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left<br>left
</div>
<div class='right'></div>
<script>
window.onload = function () {//onload begin
var setAlign = function () {
var lefts = document.getElementsByClassName('left');
var rights = document.getElementsByClassName('right');
var length = lefts.length;
var height;
for (var i = 0; i < length; i++) {
height = getComputedStyle(lefts[i]).height;
rights[i].style.height = height;
}
};
setAlign();
window.onresize = function () {
setAlign()
}
}//onload end
</script>
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru" dir="ltr">
<body>
<style>
.Wrap {
position:relative;
background-color:#D6F5FF;
}
.left {
width:200px;
height:400px;
border:1px solid red;
}
.right {
top:0;
bottom:0;
margin-left:220px;
width:200px;
position:absolute;
border:1px solid blue;
}
</style>
<div class=Wrap>
<div class=left>Левая</div>
<div class=right>Правая, ровняем под левую</div>
</div>
</body>
</html>
|
Deff,
абсолютная позиция не всегда нужна. и в твоем способе еще еще один недостаток, это то что если правый блок будет переполнен больше чем левый. То все поедет. bes, на скриптах вообще нет смысла рассматривать. На них все умеют это делать да и не интересно верстку делать скриптами. |
devote,
Цитата:
Цитата:
|
Deff,
ну у меня еще проще.. если не учитывать ИЕ7, хотя и для него костыль имеется. А по ссылке что привел bot87, там вообще черт ногу сломит.. слишком много писать для простой задачи не вижу смысла. |
Ну терь у чела есть большой выбор |
| Часовой пояс GMT +3, время: 06:07. |