Многострочные заголовки и резина/адаптив, как быть?

Question

[massef]

Привет.

Имеем некие текстовые блоки, длина заголовков разная, соответственно и высота разная. Текст под заголовком выравнивается по верхней линии.
Пример codepen.io/anon/pen/Zbzzmm?editors=110 Сожмите окошко, текст уже не выравнивается в одну линию, т.к. высота заголовка увеличилась.

Как быть в том случае, когда макет сжимается?
Тут напрашивается очевидное использование media queries с min-height в нужном месте, согласен. Но насколько это правильно?
Есть ли другие решения?

Answer 1

[Андрей Пряников]

Masonry? Не, не слышал.

Comments

[massef]

Андрей Пряников мне вас жаль.

[Андрей Пряников]

massef: Благодарю покорно!

Answer 2

[Александр Синицын]

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

Подпишусь, чтобы узнать другие варианты.

Comments

[massef]

Александр Синицын Согласен, только в такой разметке имитировать таблицу не получится, а так это идеальный вариант. JS тут на мой взгляд единственное решение, но это вообще крайность.

Answer 3

[hime2]

нах резину. Уже устарела.

Comments

[massef]

hime2 и вас мне тоже жаль

Answer 4

[Максим Тимофеев]

Есть огромное кол-во css framework-ов, которые делают все за Вас. Например bootstrap или fondation. Зачем изобретать велосипед. Возьмите готовый и настройте под себя.

Answer 5

[Алексей]

оберни заголовки в блочные элементы и задай им стилистику одним классом. Или, как вариант - оберни все заголовки в один блок а контекст в другой, ширину задавай в процентах, кверями меняй размер шрийтов. Или юзай bootstrap, там уже все придумано. Только вот нужен ли тебе фреймворк - дело твое)

Comments

[massef]

Алексей можете тыкнуть где в bootstrap это реализовано?

[Алексей]

Честно говоря давно уже не работал с bootstrap т.к. сейчас занимаюсь бекэндом. Могу подсказать только направление в котором копать. Есть класс .clearfix, который выравнимает высоту колонок с классом .col, находящихся в одном контейнере .row
Покопай вот тут bootstrap-3.ru/css.php#grid-example-fluid в разделе: Адаптивные колонки сброса
Если же не bootstrap, то вот неплохая статья habrahabr.ru/post/64173
Надеюсь помог))