Как сверстать блочные элементы с выравниванием по высоте в строках с переменным количеством колонок?

Question

[Pavel K]

Приветствую!
В общем необходимо сверстать что-то типа каталога, но:

Блоки в колонках разной высоты и обрезать их нельзя. Требуется что бы они имели одинаковую высоту равную высоте наибольшего блока в строке при этом число колонок так же адаптивное =)

Через JS слишком просто и это "некрасиво".
Поддержка браузеров пока что не важна, поэтому css3.

Пытался через inline-block, естественно проблема с высотой остаётся...

Набросок для опытов: jsfiddle.net/bzc2r2dw/4

Подскажите, пожалуйста хоть на что смотреть?

Comments

[Pavel K]

Почти решил с помощью flex - осталось только как-то сделать, что бы вложенные блоки занимали всю высоту родителя: jsfiddle.net/bzc2r2dw/4

Answer 1

[Hovhannes Sargsyan]

ну думаю тут flex-box в помощь

проверено только в файрфоксе jsfiddle.net/bzc2r2dw/6

Comments

[Pavel K]

Да, до это уже нашёл - но возникла беда с вложенными элементами. (в вопросе изменил.)

[Сергей]

а если flex-box не будет работать, тогда что?

[Pavel K]

Тогда фиг с ним. Мне пока что главное красивое решение, а то на душе тяжко будет. Перфекционизм, однако...

[Pavel K]

display: table-cell решил вопрос, но не у верен что в других браузерах будет норм, кто может откройте, пожалуйста: jsfiddle.net/bzc2r2dw/8

[Pavel K]

Упс, пардон, не дочитал доки, нужно было просто убрать height:100%; Вот полностью рабочий и удовлетворяющий образец: jsfiddle.net/bzc2r2dw/9