Как выровнять блоки по высоте?

Question

[McThinker]

Прошу помочь выровнять блоки с текстом по высоте по самому большому. Пробовал и flex и jQuery. В гугле ответов много, но ни один не помог. Что то делаю не так?
Еще проблема, что в некоторых item добавляется .rating. Задать ему абсолютное позиционирование не вариант.

Вот код.

Answer 1

[Ankhena]

Высоту 100% для thumbnail задайте.

Comments

[McThinker]

это выровняет .thumbnail, а как выровнять дочерний p по самому высокому? Нужно на выходе получить цену в одну строку и button

[Ankhena]

McThinker, внезапно )))
Было бы круто это писать в вопросе.

В такой разметке без js или ограничения блоков по высоте - никак.

[Ankhena]

McThinker, Сработает вот по такой схеме https://jsfiddle.net/qb4mxkuf/

[McThinker]

Ankhena, зафиксировал блоки по высоте. Пример
Это нормальная практика с учетом того, что на сервере могу обрезать часть текста и разница не будет превышать 1 строку?

[Ankhena]

McThinker, можно наложить градиент, чтобы текст под ним исчезал. При наведении на карточку показывался полностью.

[McThinker]

Ankhena, да, знаю, спасибо.

Answer 2

[Антон Спирин]

По-хорошему, знакомство с bootstrap надо начинать с изучения его исходного кода. Отложите его на время и попробуйте сверстать то же самое своими силами.
У вас высота колонок одинаковая, но контент занимает ее не полностью. Добавьте элементам div.thumbnal.no-border.no-padding, свой селектор и задайте высоту 100%.

Comments

[McThinker]

Не правильно задал вопрос. Как выровнять p по самому высокому? Нужно на выходе получить цену в одну строку и button

[Антон Спирин]

McThinker, у вас только два блока могут иметь разную высоту. Это заголовок и описание. Следовательно вам надо убрать остальные элементы из контейнера с заголовком и описанием и ближнему к нему(это будет .price) задать margin-top: auto;, только для таблеток и выше, а контейнеру div.thumbnal.no-border.no-padding надо задать:

display: flex;
flex-direction: column;
align-items: center;

Это только один из вариантов.

И да, нежелательно переопределять в своем коде вендорные селекторы.