Верх страницы
Обложка к записи jQuery сниппеты: Equal Column Height
Время для прочтения: 0 мин. 1 сек.

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

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

На помощь как всегда приходит 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 пикселей.

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

Русский разработчик с 20-ти летним стажем. Работаю с PHP, ООП, JavaScript, Git, WordPress, Битрикс, Joomla, Drupal, Opencart, DLE, Laravel, Moonshine, SuiteCRM.

Оптимизирую сайты под Google Page Speed, настраиваю импорты для больших магазинов на WooCommerce + WP All Import. Пишу плагины на заказ. Все мои услуги.

Веду блог о разработке, дайджест в телеграмме и в ВК.

Вы всегда можете нанять меня.

Комментарии
Подписаться
Уведомить о
guest

4 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
R@Me0
14 лет назад

Спасибо, друг! Как раз искал, чем заменить старый корявый скрипт, который вешал осла, и случайно попал на твой блог 🙂

Кстати, в этом скрипте (как и во многих других), не учитывается то, что содержание одной из ячеек может быть динамически увеличено…

И еще вопрос: можно я этот пост к себе в блог скопипастю? Я там полезные заметки храню, юзаю его как блокнот, который не потеряется.

R@Me0
14 лет назад
Ответить на  Кобзарёв Михаил

Будет ссылка 🙂
Насчет обработчика — мне не нужно. Я его и сам напишу 🙂 А вот другим думаю полезно будет 😉

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

Давайте дружить
в Телеграме

Авторский блог вашего покорного слуги в Telegram про web, программирование, алгоритмы, инструменты разработчика, WordPress, Joomla, Opencart, Laravel, Moonshine, фильмы и сериалы