Довольно таки часто, верстая сайты на дивах возникает проблема, когда необходимо блокам задать одинаковую высоту, не зная наверняка, какой она будет . То есть высота должны быть не фиксированной, а динамически изменяться и быть равной высоте самого длинного блока. В этом случае проще всего использовать ява-фреймворк 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>
А вот и живая демонстрация работы скрипта: