Как сделать блоки разной высоты

Главная / jQuery в примерах / Работа с текстом / Блоки одинаковой высоты

сделать

Посмотреть Demo Скачать рабочий пример

В качестве разметки будем использовать списки. В каждый элемент li поместим картинку товара и его описание. Фото умышленно взяты разных размеров. Как правило, при наполнении сайта администратор редко задумывается о том, что картинки стоит оптимизировать и заливает их на сайт как есть. Нашей задачей будет отцентрировать картинки и сделать все блоки одинаковой высоты.

<ul> <li> <div class="img"><span><img src="/img_1.jpg" alt="" /></span></div> <span>Классический текст Lorem Ipsum, используемый с XVI века, приведён ниже.</span> </li> <li> <div class="img"><span><img src="/img_2.jpg" alt="" /></span></div> <span>Классический текст Lorem Ipsum.</span> </li> <li> <div class="img"><span><img src="/img_3.jpg" alt="" /></span></div> <span>Классический текст Lorem Ipsum, используемый с XVI века, приведён ниже. Классический текст Lorem Ipsum.</span> </li> <li> <div class="img"><span><img src="/img_4.jpg" alt="" /></span></div> <span>Классический текст Lorem Ipsum, используемый с XVI века.</span> </li> <li> <div class="img"><span><img src="/img_5.jpg" alt="" /></span></div> <span>Классический текст Lorem Ipsum, используемый с XVI века, приведён ниже.</span> </li> <li> <div class="img"><span><img src="/img_6.jpg" alt="" /></span></div> <span>Классический текст Lorem Ipsum.</span> </li> <li> <div class="img"><span><img src="/img_7.jpg" alt="" /></span></div> <span>Классический текст Lorem Ipsum, используемый с XVI века, приведён ниже. Классический текст Lorem Ipsum.</span> </li> <li> <div class="img"><span><img src="/img_1.jpg" alt="" /></span></div> <span>Классический текст Lorem Ipsum, используемый с XVI века.</span> </li> </ul>

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

.select_main { margin:40px auto 0; width:800px; } ul { width:100%; } li { margin:0 10px 20px 5px; padding:10px; width:160px; display:inline-block; vertical-align:top; display:inline; zoom:1; border:1px solid #e5e5e5; }.img { width:100%; height:121px; text-align:center; display:table; position:relative; }.img span { display:table-cell; vertical-align:middle; }.img img { width:100%; }

Теперь зайдем на страницу и посмотрим, что же у нас получилось. Если с фото все более менее пристойно, то с самими блоками картина неприглядная. Напишем небольшой скрипт, который позволит легко устранить данную проблему.

$(document).ready(function(){ var maxH = 0; $("li").each(function () { var h_block = parseInt($(this).height()); if(h_block > maxH) { maxH = h_block; }; }); $("li").height(maxH); });

Сохраняемся, перегружаем страницу и любуемся проделанной работой. Все блоки приняли одинаковую высоту.

Теперь немного подробнее, чего мы тут написали. Объявляем переменную maxH и присваиваем ей значение 0. Далее выбираем все элементы li в каталоге и проходимся по ним в цикле с помощью функции each. В теле цикла мы объявляем еще одну переменную h_block в которой сохраняем значение высоты каждого элемента li, округленного до целого числа с помощью функции parseInt. Все в том же цикле задаем условие - если значение текущего блока больше, чем значение в переменной maxH, то присваиваем последней это значение. Другими словами - мы проверяем высоту каждого блока и наибольшую высоту сохраняем в переменную maxH. И, наконец, пройдясь по всем li и вычислив наибольшую высоту, мы присваиваем ее всем блокам (строка $("li").height(maxH);).

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

Исправить такую ситуацию полностью нельзя (если только не уменьшить объем текста в проблемной лишке), а вот свести недостаток к минимуму вполне возможно.

Перепишем скрипт. Как и в первый раз, он будет выравнивать блоки по самому высокому, но делать это станет немного умнее. Мы научим его считать количество li в каждом ряду и выравнивать их по самому высокому в ряду а не по самому высокому на странице.

$(document).ready(function(){ var line = $("li"); var times = 0, rows = Array(), max = 0; line.each(function() { if (times == 4) { for (var i = 0; i < rows.length; i++) { rows[i].css("height", max); } max = 0; times = 0; rows = []; } if (max < $(this).height()) { max = $(this).height(); } rows[times] = $(this); times += 1; }); if (times!= 0) { for (var i = 0; i < rows.length; i++) { rows[i].css("height", max); } } });

Вот собственно и все. Какой из методов применить, решать нужно по ситуации, но в любом случае - второй способ более универсален.

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

Автор: Super User




Рекомендуем посмотреть ещё:


Закрыть ... [X]


CSS: Плавающие блоки с разной высотой, с выравниванием в ряду по самому Фильмы как сделать машинки

Как сделать блоки разной высоты Компановка div-ов разной высоты - Проблемы. - HTML forum для разработчиков
Как сделать блоки разной высоты Html - Блоки одинаковой высоты в соседних контейнерах - Stack Overflow
Как сделать блоки разной высоты 4 способа как создать блоки одинаковой высоты / Хабрахабр
Как сделать блоки разной высоты Список блоков с разным вертикальным выравниванием
Как сделать блоки разной высоты Отзывчивые блоки одинаковой высоты на основе Flexbox
Как сделать блоки разной высоты 4 метода создания колонок одинаковой высоты
Как сделать блоки разной высоты Способы размещения блоков горизонтально
Задача плотной упаковки блоков CSS-LIVE Блоки одинаковой высоты Brest-shop. Интернет-магазин белорусских товаров. - Google Chevy-Niva : Просмотр темы - пороги "подножки" на ниву шевроле Блютуз сопряжение устройств как сделать на ДНК » Юридическая консультация адвоката: юридические услуги, юридическая Жаккардовый вязаный свитер с оленями - Вязание

Похожие новости