Довольно таки часто, верстая сайты на дивах возникает проблема, когда необходимо блокам задать одинаковую высоту, не зная наверняка, какой она будет . То есть высота должны быть не фиксированной, а динамически изменяться и быть равной высоте самого длинного блока. В этом случае проще всего использовать ява-фреймворк jQuery. Если у нас есть задача сделать одинаковую высоту у блоков, им нужно задать одинаковый класс примерно так:
<div class="column red">Новость 1</div> <div class="column blue">Новость 2</div> <div class="column black">Много текста, Много текста, Много текста, Много текста, Много текста, Много текста</div> <div class="column">Блок 4</div>
Пропишем стили для наших блоков:
.column{
float:left;
width:25%; // делаем цирину 1/4 от всей ширины, чтоб все 4 дива влезли в одну строку
color:#fff;
background:silver;
text-align:center;
}
.red{
background:red;
}
.blue{
background:blue;
}
.black{
background:black;
}
И конечно же подключаем jQuery и небольшой код:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
$(document).ready(function() {
equalHeight($(".column"));
});
</script>
А вот и живая демонстрация работы скрипта: