21:12 

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

Ryuzaki_rnd
Правильного ответа нет. Любой выбор приводит к жертвам, любое решение требует платы. | Лишь навык имеет значение.
Хао.

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

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

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


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


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



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

Комментарии
2018-12-03 в 23:33 

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

2018-12-04 в 01:02 

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

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

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

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

2018-12-04 в 07:15 

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

2018-12-04 в 13:27 

Ryuzaki_rnd
Правильного ответа нет. Любой выбор приводит к жертвам, любое решение требует платы. | Лишь навык имеет значение.
Rita Twitter, flex box или css grid

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

Комментирование для вас недоступно.
Для того, чтобы получить возможность комментировать, авторизуйтесь:
 
РегистрацияЗабыли пароль?

Помощь @экспертов – Хард и софт

главная