Как сделать чтобы все элементы в списке были одинаковой высоты?

Question

[terabait]

Есть сетка товаров вида:

<div class="items-list">
   <ul>
       <li class="abc" id="tovar'>...</li>
       <li class="abc" id="tovar'>...</li>
       <li class="abc" id="tovar'>...</li>
       ....
   </ul>
</div>

Как сделать что бы высота блока товара была равна максимальной высоте одного из них?

Пробовал сделать как указано тут - Как установить html элементам одинаковую относительную высоту? (через css display:table, table-row, table-cell) - проблема не решилась.

Нашел в гугле JS решающей эту проблему:

$(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);
});

Но при этом слетают все меню сайта.

Что нужно подправить в JS-коде, что бы он менял высоту только у карточек товара?

Answer 1

[IceJOKER]

Не понятно почему проблема не решилась с помощью display: table.

ul{
  display: table;
}
li{
  display: table-cell;
}

и все

Comments

[terabait]

nippon-kodo-russia.com/collection/podstavki-dlja-b...

Вот что получается + хотелось бы выровнять по высоте все что находится в карточке товара (название, описание, цена, купить) - хотел использовать для этого этот же JS код

[IceJOKER]

terabait: float: left - убираем. также не забываем про table-row через каждые 4 элемента.

[IceJOKER]

terabait: а выровнять можно с помощью vertical-align и text-align

[terabait]

IceJOKER: в том то и проблема что вывод сетки товара осуществляется таким образом:

• {% for product in products %} {% include 'i_product' %} {% endfor %}

язык Liquid
И как вставлять каждые 4 товара я не знаю

[IceJOKER]

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

[terabait]

IceJOKER: ну, это будет самый крайний вариант)
JS код прекрасно выравнивает все по высоте, там нужно только как то выбрать не все li, а только для товаров
В любом случае спасибо)

[IceJOKER]

terabait: ну тогда в вашем JS коде вместо $("li"), напишите $('.items-list li')

[terabait]

IceJOKER: во, то что нужно)) спасибо огромное)))

[IceJOKER]

terabait: you're welcome )

Answer 2

[Илья Агарков]

На счет JS, не думаю что разумно делать выборку $("li"), вы таким образом выбираете все li на странице, поэтому меню и ломается. В вашем случае надо использовать

$("li.abc").height(maxH);