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

Question

[jokejoy]

Данный блок должен быть одинаковой высоты. Например, если один из заголовков в 3 строки - высота всех блоков с заголовками будет равна высоте этого блока. Как это можно реализовать?

Comments

[Андрей Федоров]

Никак. Точнее нужно поменять верстку так, что вас такой подход все равно не устроит.

[Ankhena]

Карточке задать

display: flex;
flex-direction: column;

дате
margin-top: auto

Но это не решит проблему, если описание будет разной высоты.

[auddit]

Без JS не обойтись.
Находим все высоты всех блоков с заголовком и датой, из них берем максимальную высоту и задаем ее всем остальным блокам с датой и заголовком.. Саму дату нужно сделать position:absolute и выровнять по нижней стороне, а блоку с заголовком и датой задать padding-bottom = высоте даты.

Но, лучше поставить дату в самом начале или в самом конце (также задав position: absolute). Дата в самом низу будет смотреться даже лучше и визуально выравнивать все контейнеры.

[jokejoy]

auddit, Спасибо, с JS все получилось

Answer 1

[Талян]

А если заголовок может быть всегда разной длины - не логичней ли тогда пристроить дату поста не под ним, а слева, с отрицательным маргином например?
Че за верстка?
Либо делайте так, чтобы длина заголовка была не больше, чем.....хххх, и под это подстраивайтесь.

Если макет менять нельзя, то в вашем случае я вижу два решения:
1) И кстати я думаю, что это наилучший исход событий: ограничиваете в любом случае длину заголовка. И по символам и п о высоте. Можете подсчитывать при выводе длину текста заголовка, и - как хотите но умещайте заголовок в 2-3 строки максимум, и делайте ему max-height, уменьшайте длинным заголовкам кегль. Иначе будет абсолютно неприятно смотреться рядом два заголовка - один на 5 строк, второй на одну. Под первым - будет дата. Под вторым - будет куча пустоты, и только потом дата. Разве это красиво?

2) Делайте таблицей, тупо table, tr,td. Да - говно. Ну а как?