Разная высота контента в однотипных блоках, как сделать по красоте?

Question

[Дмитрий Дербенев]

Привет! Имеется стандартный блок с однотипными элементами:


При разных размерах контента всё это начинает выглядеть мягко говоря не ок:


Товарищи верстальщики, как боритесь с таким недугом? Буду рад примерам/советам/решениям.

Comments

[Lynn «Кофеман»]

Сначала с таким недугом дизайнер должен поработать. Возможно после этого редактор текстов, а уж потом верстальщик.

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

[Дмитрий Дербенев]

Алексей Тен, увы, вместо первых двух это всё всегда прилетает ко мне

[Сергей delphinpro]

Тут в любом случае придется идти на компромисс. Полностью универсальное решение будет только на сетках. Но универсальное оно только по выравниванию, выглядеть все равно будет уродливо если объем контента сильно различается.
Вернемся к компромиссу.
Как правило, без ущерба всегда можно ограничить высоту основного текста (под картинкой). Так же в данном случае можно наверное обрезать текст рядом с датой и конечно размер картинки.
Ну а заголовок оставить как есть, и получится примерно так: https://codepen.io/delphinpro/pen/ZxvagV?editors=1100

Answer 1

[Евгений Николаев]

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

Answer 2

[Otrivin]

Фиксированная высота текстовых блоков с text-overflow ellipsis, если плясать от фронтэнда; ограничение на количество выводимых символов , если от бэкенда.

Answer 3

[Руслан Галиев]

Контент будет представлен только тремя элементами? Если нет, то кирпичи вам помогут. https://masonry.desandro.com

В любом случае можно уменьшить количество элементов в блоке, чтобы не так сильно шумело: убрать ссылку "читать", текст до фото и дату (если наличие даты принципиально, то сделать ее менее выделяющейся).

Если нужно стандартизировать высоту блока, это можно сделать путем регулирования количества символов в аннотации, в зависимости от длины заголовка. Либо проще - аннотация у всех одинаковая но обрезается снизу, поверх кладем градиент от белого к прозрачности.

Обрезать заголовок - не лучшая идея.

Answer 4

[display: block]

https://codepen.io/anon/pen/Gxyyrv
Два способа:
-с ограничением title по высоте и на float'ах (тайтл всё равно должен иметь ограничение: 3 строки, 4...)
-на флексах

Description можно резать по троеточию или тенью.