javascript: изменение высоты блоков относительно блока с максимальной высотой
В примере устанавливаем для всех элементов с class catalog_item высоту самого высокого.
function setEqualHeight(columns){ var tallestcolumn=0; columns.each( function(){ currentHeight=$(this).height(); if(currentHeight>tallestcolumn) { tallestcolumn=currentHeight; } } ); columns.height(tallestcolumn); } $(window).load(function() { setEqualHeight($(".catalog_item")); });
Размещенный код добавляем в head, размещенная ниже информация больше для ознакомления.
В стилях явно не указываем height для класса catalog_item, установится высота блока с максимальной высотой по содержимому.
.catalog_item {
min-height:10px;
width:200px;
overflow:hidden;
margin-bottom:20px;
margin-right:20px;
float:left;
}
Второе более неправильное решение: задать для всех блоков статичную ширину на глаз и добавить overflow:hidden на случай если текст не поместится.
.catalog_item {
height:200px;
width:200px;
overflow:hidden;
margin-bottom:20px;
margin-right:20px;
float:left;
}
И 3-й совсем неправильный вариант использовать таблицу и после каждых n элементов закрывать и открывать tr. Перед foreach $i=0; внутри foreach после закрытия td проверять не делится ли $i без остатка например на 4
$i%4==0
<table cellpadding="0" cellspacing="0"> <tr> <?foreach ($items as $item) {?> <td><div class="catalog_item">тут содержание блока</div></td> <?if ($i%4==0) { echo "</tr><tr>"; }?> <?}?> </tr> </table>
