Как задать рядам элементов DOM дерева HTML документа одинаковую высоту?

Question

[Maксим Волков]

Подскажите решение для задания одинаковой высоты, элементам DOM находящимся в одном ряду.

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

Проблему можно решить простым скрипом на JS – выбрать и обойти все элементы DOM – определить и затем установить всем элементам, одинаковую высоту.

Но хотелось бы сделать это с учетом рядов. Например, если в ряду находится 4 элемента – то определить и установить одинаковую высоту только для них, затем для следующего ряда, и т.д.
Сайт на Flex, мобильно адаптирован, и разных разрешениях в ряду разное количество элементов, от 1 до 4.
Может ли кто-нибудь подсказать решение данной задачи?

Answer 1

[Maксим Волков]

Благодарю за советы ограничится возможностями CSS. В моем случае это не получится, по крайней мере я не представляю как это возможно сделать, так как карточка товара несколько сложнее чем на первом скриншоте.

На некоторых товарах выводятся блоки с разными типами цен - скидками. Кроме того на Hоver - появляется кнопка купить с выбором количества. Вобщем без JS не обойтись.



Нашел решение на просторах интернет, учитывая, что, возможно решение пригодится кому-нибудь еще приведу пример кода функции:

function funcItemsHeight(domItem) {
	var menuItems = document.querySelectorAll(domItem);
	var top = menuItems[0].offsetTop;
	var arrHeight = [];
	var arrItems = [];
	for (var i = 0; i < menuItems.length; i++) {
		menuItems[i].style.height = 'auto';
	}
	for (var i = 0; i < menuItems.length; i++) {
		if (top != menuItems[i].offsetTop) {
			arrHeight.sort(function (a, b) { return b - a });
			for (var j = 0; j < arrItems.length; j++) {

				arrItems[j].style.height = arrHeight[0] + 'px';
			}
			top = menuItems[i].offsetTop;
			arrHeight.length = arrItems.length = 0;
			i = i - 1;
			continue;
		}
		arrHeight[arrHeight.length] = menuItems[i].offsetHeight;
		arrItems[arrItems.length] = menuItems[i];
	}
	arrHeight.sort(function (a, b) { return b - a });
	for (var j = 0; j < arrItems.length; j++) {
		arrItems[j].style.height = arrHeight[0] + 'px';
	}
}
window.onresize = funcItemsHeight;

funcItemsHeight('.ВАШ_ЭЛЕМЕНТ');

Answer 2

[Антон Литвиненко]

Ну так сайт на флекс, поумолчанию каждый ряд ведёт себя так как вам нужно. А дальше просто нужно решить, как внутри карточки что расположить, чтобы было красиво. Обычно описаным вами скриптом обходят как раз блок с названием и одинаковую высоту дают ему. Если карточка флекс, то достаточно элементу, идущим за названием задать margin-top: auto

Answer 3

[hzzzzl]

положить всё кроме названия в отдельный див, и его прижать к низу