В качестве разметки будем использовать списки. В каждый элемент 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); } } });
Вот собственно и все. Какой из методов применить, решать нужно по ситуации, но в любом случае - второй способ более универсален.
Ну и пару слов благодарности автору. К сожалению, я не запомнил ресурс, на котором были опубликованы данные методы, но если автор отпишется в комментариях, то я с удовольствием укажу в статье сайт-источник.