Если вы хотите, чтобы ваши столбцы имели определенную ширину, используйте column-width
.
section ( -webkit-column-width: 200px; -moz-column-width: 200px; column-width: 200px; )
Браузер подсчитает, сколько столбцов хотя бы этой ширины может поместиться в пространстве. Думайте о column-width
предложении минимальной ширины для браузера.
column-width
гибкое свойство. Как только браузер не может вместить хотя бы 2 столбца с указанной шириной, столбцы остановятся и упадут в один столбец.
Это свойство также используется в сокращении columns
и может использоваться вместе с column-count
. Когда оба свойства объявлены, column-count
это максимальное количество столбцов.
Значения
Вы можете установить column-width
на auto
или длину.
Используйте, auto
если вы также используете column-count
или если вам нужно отключить свойство. Думайте об этом как о способе сказать браузеру, чтобы он column-count
взял на себя инициативу.
Чтобы указать ширину столбцов, используйте длину больше (или равную) 0. Вы можете использовать любые единицы CSS, кроме процентов.
Поддержка браузера
Поддержка макета с несколькими столбцами:
Хром | Сафари | Fire Fox | Опера | IE | Android | iOS |
---|---|---|---|---|---|---|
Любой | 3+ | 1.5+ | 11.1+ | 10+ | 2.3+ | 6.1+ |
Не забывайте свои префиксы!