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

Question

[Олег Торбасов]

• Есть некоторое заранее не определённое количество блоков.
• Они располагаются слева направо один за другим, а достигая края контейнера переносятся на следующую строку, и так далее.
• Ширина блоков определяется по содержимому, но не менее трети контейнера (для упрощения задачи этим требованием можно попытаться пренебречь).
• Высота блоков наименьшая возможная при соблюдении двух требований: она не менее содержимого и равна у всех блоков в пределах каждой строки (при этом в разных строках она может быть различна).

Возможно ли сверстать такое без таблицы (и вообще явного разбиения в HTML-коде на строки) и Javascript? Я понимаю, что нет, но есть облегчающее задачу обстоятельство: решение нужно только для Firefox, следовательно, можно свободно применять поддерживаемый им CSS3. Flexible Box не поможет?

В крайнем случае, интересует решение с помощью модулей CSS3, даже не реализованных в Firefox и вообще в каком-либо браузере.

Answer 1

[pel]

Посмотрите Habr://Кроссбраузерный inline-block

Comments

[Олег Торбасов]

И что? Я это прекрасно знаю. Это не решает поставленной задачи. Высота блоков разная.

Answer 2

[mdss]

У Сергея Чикуенка есть хорошая статья как раз по этой теме:
chikuyonok.ru/2011/04/inline-vertical-align/
Пример:
chikuyonok.ru/u/inline-va/

Comments

[Олег Торбасов]

Не совсем то. Ширина фиксированная и блоков равной высоты не получается.

Answer 3

[happyman1]

Искал долго, отпишусь для тех кто знает ширину.
Самый простой вариант это в виде обычного списка. где ul контейнер, li дочерние элементы.
p.s. может не работать при использовании бутстрап.