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

Question

[Вика Мармеладка]

Есть элементы, их нужно выстроить в столбик поочередно сверху вниз, как это сделать на css.


Если использовать газетные свойства вроде columnCount, то происходит след.

Comments

[Collonil Tolli]

bootstrap нужен?

[Вика Мармеладка]

Collonil Tolli, не, чистый css

[Ankhena]

Наверное, вы забыли inline-block для элементов.
https://jsfiddle.net/1tdwo8gk/

[Евгения Авдеева]

каждому дочернему элементу внутри тега со свойством column-count укажите следующие параметры

page-break-inside: avoid;
-webkit-column-break-inside: avoid;
break-inside: avoid;

можно через > *
Например, родитель имеет свойство column-count с классом .table
тогда

.table > * {
   page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
}

Answer 1

[Rsa97]

Всё прекрасно работает через columns. Показывайте свой код.

Comments

[Вика Мармеладка]

У вас колонки имеют четное количество. Вот что будет если не четное

[Rsa97]

Вика Мармеладка, Firefox 91.0.1, Linux

[Вика Мармеладка]

Rsa97, Подвигайте ширину экрана, увидите как они прыгают.

[Rsa97]

Вика Мармеладка, В Firefox не прыгают.
Вижу такую проблему в хроме. Меняется заменой padding на line-height.
Исправил в ответе.

[Вика Мармеладка]

Rsa97, а теперь в случае четного числа, встают криво))

[Rsa97]

Вика Мармеладка, В каком браузере? У меня хром 92 не делает 9 колонок для 40 элементов, только 8 или 10. Firefox аналогично. И для 42 элементов не могу получить такую картинку, и для 44.

[andand44]

Можно попробовать использовать

.div {
	page-break-inside:avoid;
	break-inside:avoid-column;
}

Какое свойство в css запретит переноса строки в column-count?

[Rsa97]

andand44, Судя по всему, это старый прикол хрома. Он отрывает паддинг и переносит его в новую колонку.
https://stackoverflow.com/questions/23745077/block...

[andand44]

Вероятно. В любом случае с этими правилами результат будет более предсказуемый.

[Ankhena]

Чтобы не было переноса, итемам нужен inline-bock