Блоки с одинаковой высотой

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

А вот и живая демонстрация работы скрипта:

This entry was posted in Jquery and tagged , , , . Bookmark the permalink.
Новость 1
Новость 2
Много текста, Много текста, Много текста, Много текста, Много текста, Много текста
Блок 4

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*