Доброго дня.
Есть
проблема, которая заключается в том, что три блока должны быть всегда равны по высоте друг с другом, при этом внутри блоков текст (то, что после тайтла и "картинки") должен быть выровнен по центру относительно друг друга. То, что я хочу получить, с допущениями и оговорками реализовано в
варианте 1 (описан ниже).
Это легко решается при помощи флексбокса, но хилая поддержка флекса (сразу убьется поддержка IE аж 9 версии) не позволяет использовать его в этом случае. Блоки я выровнял при помощи css-таблиц, но как быть с контентом внутри? Пока что мне в голову приходят только эти варианты:
1)
Рабочий вариант, но критичные недостатки не позволяют остановиться на этом. Отступ сверху у .item становится фиксированной, а заголовки могут быть и в несколько строк, как, например,
здесь.
2) Второй вариант, полностью гибкий, но к сожалению, некрасивый - вложить в .item еще одну таблицу, внутри сделать несколько дополнительных оберток, чтобы каждый вертикальный элемент был строкой таблицы. Это позволит выровнять контент.
Как сделать такое максимально гибко, без js и без флексбокса, не перегружая верстку лишними блоками? Возможно, какой-то хитрый хак с overflow и псевдоэлементами?
Заранее спасибо.
Простой
Средний
