Как использовать css3 column для блоков, а не для текста?

Question

[TANK_IST]

При использовании колонок для текста всё ОК, текст переносится целым.
А вот когда я использую блоки получается вот такая беда: jsfiddle.net/ehQ6c
Блоки переносятся по кусочкам, а мне это совсем не нужно.

Дело в том что высота родительского блока может изменятся и когда блок не влазит в колонку он должен переносится целиком:


Возможно ли это сделать без JS?

Answer 1

[omo]

Сделайте внутренние дивы инлайн-блоками jsfiddle.net/ehQ6c/1

Comments

[TANK_IST]

гениально!

[Nash]

да вы с ума сошли, у нас же css3 и html5! Какие инлайн блоки? Вы потом будте еще хак с font-size: 0 писать, чтобы расстояние между блоками контролировать.

[Eediter]

columns + — на свой страх и риск. Если высота группируемых блоков одинаковая, то inline-block и спим спокойно, но если она вдруг разная, то готовимся к боли и унижению.

[ins24]

а чего боль и унижение? с инлайн блоками все нормально будет отображаться. это с флоатами будет боль и унижение при разных высотах.
Да и columns вообще не очень браузерами поддерживается.

Answer 2

[Nash]

Используй display: flex он же flex-box.

Comments

[TANK_IST]

вот я пробовал flex hashcode.ru/questions/336411/html-%D0%BA%D0%B0%D0%...

Answer 3

[okozlovskyi]

Насколько я знаю, то это свойство не предназначено для блоков.
А в чем проблема сделать float:left + width: x% ?

Answer 4

[ins24]

и все логично, что не помещается переносится в следующую колонку, он же для текста предназначен. а почему именно способ колонками? действительно же лучше инлайн-блоками или флоатами?

Comments

[TANK_IST]

Мне нужен список аля windows 8 и для этого подходит только колонки
Все работает почти отлично, вот только размеры родителя приходится устанавливать через JS так как они автоматически становятся минимальными