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

Question

[Kazanbi]

Всем привет выше, как вы видите на странице контент расположен не равномерно, что то ниже, что то выше, как сделать их одинаково, чтобы они все были одинаковы по высоте за ранее спасибо!

Answer 1

[Вадим]

https://brm.io/jquery-match-height/
(уверен есть вариация без jQuery)

Либо фиксировать размеры отдельных элементов карточки по высотам.

CSS не умеет так как Вам надо в динамике.
Одинаковая высота может быть только в рамках одного родителя через display: flex или grid.
А Вам нужна одинаковая высота между разными элементами, у которых общий родитель не ближайший вверх по дереву.

Единственное что можно сделать, это задать margin-top: auto первому блоку после описания Товара, тогда это прижмёт к низу все последующие блоки, что может создавать пустоту в отдельных случаях между описанием товара и остальными блоками (хотя такое будет и с решением на js)
Как-то так:

Comments

[Rerurk]

vh, rem не?

[Вадим]

Rerurk, и как это поможет у трех разных элементов сделать одинаковой высоту у блоков с неизвестным заранее количеством контента?
И чем это отличается от "фиксировать размеры отдельных элементов карточки по высотам ", кроме того, что единицы измерения относительные, а не абсолютные?

[Rerurk]

Вадим, я не оспариваю ваше решение. Я спрашиваю

[Вадим]

Rerurk, ну так и я спрашиваю) озвученные вариант в моем представлении не решает вопрос от слова никак. Поэтому испытал недоумение. Ну и подача с "не?" на конце как бы намекает, что Вы считаете, что это может подойти

Answer 2

[Олег]

Разве это не решение проблемы? (https://qna.habr.com/q/1209650)

Дать карточкам дисплэй флэкс, они растянуться под стречем по ширине родителя.

Comments

[Kazanbi]

нет нужно, чтобы не блок был одной высоты, а контент был на одном уровне по высоте

[Вадим]

Нет, потому что уровень блока с ценой и с кнопками(рейтинг. избранное) будет плавать в зависимости от длины текста в описании товара. И если блок с кнопками ещё можно прижать к низу - то с промежуточными блоками, которые находятся между первым (с картинкой) и последним - уже так легко не зафиксировать, чтобы в рамках строки они были на одном уровне.

[Олег]

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

[Вадим]

Олег, да, так прокатит, как раз дополнил свой ответ подобным решением, но без лишних обёрток

[Ankhena]

Олег,

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

Не прокатит, потому что на скрине два дочерних имеют неизвестную высоту. (И обертка не нужна)

Пока ждем subgrid придется использовать js.