14.06.2012, 02:25
|
|
Новичок на форуме
|
|
Регистрация: 14.06.2012
Сообщений: 4
|
|
|
Выравнивания DIVов по высоте
Здравствуйте.
Имеется
<div id="apDiv1">
и
<div id="apDiv2">
Они стоят рядышком и имеют фиксированную ширину.
<div id="apDiv1"> заполняется текстом (его высота зависит от количества строк текста).
Как сделать так, чтобы высота второго дива (<div id="apDiv2">) автоматически становилась равной высоте первого дива?
Необходимо, чтобы они вели себя подобно таблице с двумя ячейками. |
|
14.06.2012, 06:56
|
|
что-то знаю
|
|
Регистрация: 24.05.2009
Сообщений: 5,176
|
|
|
Сообщение от Undecided
|
|
Необходимо, чтобы они вели себя подобно таблице с двумя ячейками.
|
а в чем проблема юзать таблицу?
<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>
Последний раз редактировалось devote, 14.06.2012 в 07:54.
|
|
14.06.2012, 08:55
|
 |
Тлен
|
|
Регистрация: 02.01.2010
Сообщений: 6,587
|
|
|
Если нужно именно то что описано, то нужно просто засунуть первый во второй и спозиционировать как надо.)
__________________
29375, 35
|
|
14.06.2012, 10:06
|
|
Профессор
|
|
Регистрация: 16.05.2011
Сообщений: 307
|
|
__________________
Я только учусь.Ногами просьба не бить 
|
|
14.06.2012, 12:40
|
 |
Профессор
|
|
Регистрация: 22.03.2012
Сообщений: 3,744
|
|
На 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>
|
|
14.06.2012, 13:06
|
|
без статуса
|
|
Регистрация: 25.05.2012
Сообщений: 8,219
|
|
<!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, 14.06.2012 в 13:11.
|
|
14.06.2012, 14:17
|
|
что-то знаю
|
|
Регистрация: 24.05.2009
Сообщений: 5,176
|
|
|
Deff,
абсолютная позиция не всегда нужна. и в твоем способе еще еще один недостаток, это то что если правый блок будет переполнен больше чем левый. То все поедет.
bes,
на скриптах вообще нет смысла рассматривать. На них все умеют это делать да и не интересно верстку делать скриптами.
|
|
14.06.2012, 14:24
|
|
без статуса
|
|
Регистрация: 25.05.2012
Сообщений: 8,219
|
|
devote,
|
Сообщение от devote
|
|
абсолютная позиция не всегда нужна.
|
площадка под оба блока задается обрамлением , поэтому, вродь как позиция второго - не актуальна, потом у Aetae вариант проще и без абсолюта
|
Сообщение от devote
|
|
это то что если правый блок
|
Этот недстаток я мысленно учел, но в условиях его не было
Последний раз редактировалось Deff, 14.06.2012 в 14:27.
|
|
14.06.2012, 14:26
|
|
что-то знаю
|
|
Регистрация: 24.05.2009
Сообщений: 5,176
|
|
|
Deff,
ну у меня еще проще.. если не учитывать ИЕ7, хотя и для него костыль имеется. А по ссылке что привел bot87, там вообще черт ногу сломит.. слишком много писать для простой задачи не вижу смысла.
|
|
14.06.2012, 14:30
|
|
без статуса
|
|
Регистрация: 25.05.2012
Сообщений: 8,219
|
|
 Ну терь у чела есть большой выбор |
|
|
|
