Ширина столбца - CSS-хитрости

Anonim

Если вы хотите, чтобы ваши столбцы имели определенную ширину, используйте 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+

Не забывайте свои префиксы!