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