Свойства CSS

Меню

columns

Поддержка браузерами

12.0+ 10.0+

Описание

CSS свойство columns позволяет использовать значения свойств column-width и column-count в одном объявлении.

Значение по умолчанию: auto auto
Применяется: к незамещаемым блочным или табличным элементам, к ячейкам таблицы или inline-block элементам
Анимируется: да, смотрите каждое свойство, входящее в состав краткого метода, отдельно
Наследуется: нет
Версия: CSS3
Синтаксис JavaScript: object.style.columns="100px 3"

Синтаксис

columns: auto|column-width column-count|inherit;

Значения свойства

Значение Описание
column-width Ширина колонок.
column-count Количество колонок.
inherit Указывает, что значение наследуется от родительского элемента.

Пример


<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Пример</title>
  <style>
    .newspaper {
      columns: 100px 3;
    }
  </style>
</head>

<body>
  <div class="newspaper">
    Стандарт CSS3 еще не принят, но многие полезные свойства уже поддерживаются большинством
    браузеров. Из новых свойств стоит прежде всего обратить внимание на box-shadow и
    text-shadow, который позволяют добавлять различные по виду и расположению тени, как
    к тексту, так и к элементам, например можно сделать меню, отбрасывающую легкую тень,
    для придания объемного вида. Еще одно из свойств предназначено для работы с
    текстом - column, он позволяет делить текст на колонки, задавать ширину для них,
    управлять расстоянием между колонками и выбирать стиль, ширину и цвет для
	границ между ними. 
  </div>
</body>

</html>

Результат данного примера в окне браузера:

columns