Вопрос по вёрстке.

[Ryuzaki_rnd]

Хао.

Дано:
• Рандомное число блоков в строке (display: inline-block или float: left).
• У блоков есть граница.

Необходимо:
• Блоки должны переноситься на другую строку, если не влезают (например, если экран узкий).
• В одной строке блоки должны быть одной высоты.
• Всё это должно работать в IE6+.

1) Исходный вид.


2) Как должно выглядеть если всё влезает в одну строку.


3) Как должно выглядеть, если не влезает в одну строку (элемент 3 перешёл на новую и т.к. других нет - подобрался по содержимому).



Собсно вопрос - как это сделать?
В сети куча примеров как сделать видимость одинаковых колонок разными способами и т.д. Повторяющийся фон, например...
Но мне надо, чтобы была граница. А она, поджимается по содержимому.((( Из-за чего вся эта эмуляция не работает.

Comments

[Tetroka]

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

[Ryuzaki_rnd]

Tetroka, Да вот если бы было условие, что в строке только 2 элемента - оно бы через таблицу решалось спокойно.
В обычном режиме - табличка, а когда ширина сокращается (мобилки, например), то td присваивается display: block и они прекрасно все столбиком становятся.

Но суть в том, что должно работать для любого количества элементов в строке.(

Т.е. если 2 строки по 3 элемента выходит, то табличку уже не используешь. Т.к. при маленькой ширине буква Г получится.
Т.е вместо преобразования в 3 строки по 2 элемента, получится 4 строки - 2-1-2-1.

* Ну и в целом, ширина да - фиксированая для всех элементов.
Проблема в том, чтобы высота подстраивалась по самому высокому в строке.

[Rita Twitter]

Ryuzaki_rnd,
Может, попробовать flex box или css grid? Последний пункт гридом точно несложно выполняться должен.

[Ryuzaki_rnd]

Rita Twitter,

flex box или css grid

Не вариант, у них кроссбраузерность плохая. Особенно у grid.