Колонки одинаковой высоты – лучший скрипт

« Предыдущая запись
 
  Следующая запись »
 

Зачастую необходимо задать нескольким колонкам одинаковую высоту, дабы сохранить целостность дизайна страницы. Но цели этой одинаковой высоты могут быть различны: одно дело, когда речь идёт о трёх колонках, скажем, разметки сайта, а другое дело, когда у нас много блоков или число блоков варьирует от нескольких штук, до нескольких десятков. Первый случай мы не рассматриваем, т.к. там решений много и они несложные, а вот во втором случае…

Рассмотрим пример. В родительском блоке с ограниченной шириной (скажем 1000px) расположен дюжину блоков шириной в 250px, которым задан float:left. Задайте им разную высоту и вы увидите, что они ложатся настолько криво, насколько это возможно. Что нужно? Одинаковая высота колонок.

Для задания одинаковой высоты, в некоторых (скорее редких) случаях подойдёт просто min-height, но он не является панацеей. Нужен скрипт, который бы выделил самый высокий блок в коде и задал бы остальным блокам ту же высоту. Замечательно, и таких примеров хватает, НО!

Есть одно громадное НО. Допустим все колонки получаются в высоту 100px, а лишь одна в 300px. Несложно догадаться, что все колонки будут в 300px и будут строки с большим отступом до следующей строки. И выглядеть это будет очень гумозно. Что же нужно?

ЦЕЛЬ: скрипт, который обрабатывает массив контейнеров следующим образом – смотрит сколько получается строк, какой блок в каждой строке самый высокий и подгоняет остальные блоки в строке под максимальную высоту блока для этой строки.

equalheights Колонки одинаковой высоты – лучший скрипт

И самое приятное, что такой скрипт существует! Недавно один умный мужик, Стивен Акинс, опубликовал у себя в блоге статью, где предлагает рабочий скрипт на jQuery, который справляется с задачей на ура.

Идея работы скрипта проста: учитывается позиция контейнера от вершины страницы, в следствие чего распознаётся какой контейнер в какой строке расположен.

Я скрипт сильно не изменял, добавил лишь возможность прописать идентификатор/класс объектов, к которым применять скрипт.

Использование. Подключить jQuery, подключить файл скрипта, активировать скрипт на странице. Последний шаг представлен чуть ниже.

$(function() {
    columnConform('#page-wrap > div');
});
$(window).resize(function() {
    columnConform('#page-wrap > div');
});

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

Предлагаю ссылку на пример и ссылку на архив примера, чтобы можно было скачать и поюзать у себя.

 

 


1 звезда2 звезд3 звезд4 звезд5 звезд (голосов: 8, средний: 4.38 из 5)
Понравилась статья или журнал? Подписывайся на продолжение!
Отзывов нет на запись

"Колонки одинаковой высоты – лучший скрипт"

Добро пожаловать, коллега! Вы можете оставить свой отзыв:





Допустимые XHTML-теги:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Подписка на комментарии