Колонки одинаковой высоты на JQuery
Задача: Есть допустим несколько блоков div, которым надо сделать одинаковую высоту, не зависимо от содержимого.
Решение: В интернете много всяких решений. Но мне понравилось одно на JQuery. Делается просто и со вкусом. И так кодим. Для начала создаем структуру
<div>
<div class="first column">1<br/></div>
<div class="second column">1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/></div>
</div>
Класс column обязательно, добавим немного стилей
.column {width:20%;float:left}
.first {background:red}
.second{background:blue}
Подключаем JQuery
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
И сам скриптик
<script type="text/javascript">
var k = jQuery.noConflict();
function equalHeight(group) {
var tallest = 0;
group.each(function() {
thisHeight = k(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
k(document).ready(function(){
equalHeight(k(".column"));
});
</script>
Как тут че работает?
А просто вызывается функция equalHeight, которая сравнивает высоту блоков, и задает всем блокам имеющих класс column одинаковую высоту через инлайн стили. Все просто
Комментарии