jQuery сниппеты: Equal Column Height

28 Янв
2010

При блочной вёрстке на основе плавающих блоков невозможно выровнять соседние колонки по высоте большей из них. Если, конечно не использовать фальшивых колонок.

На помощь как всегда приходит javascript (jQuery):

HTML:

<div style="height:350px;" class="column"></div>
<div class="column"></div>

CSS:

.column {
    float: left;
    width: 200px;
}

jQuery:

var max_height = 0;
$("div.column").each(function(){
   if ($(this).height() > max_height) { max_height = $(this).height(); }
});
$("div.column").height(max_height);

Всем колонкам, за которыми нам нужно следить даём класс «column». Сниппет автоматически присвоит им высоту, равную большей колонке. В данном примере высота обеих колонок станет равной 350 пикселей.

Автор — Кобзарёв Михаил

2leep.com

Оставить комментарий или два

*

Наверх