Опубликовано: 18.08.2010 Последняя правка: 10.12.2015
CSS1CSS2CSS2.1CSS3
IEChromeFireFoxOperaSafari

columns

Свойство CSS columns используется для одновременного указания количества и ширины колонок (столбцов) в многоколоночном элементе.

Тип свойства

Назначение: форматирование.

Применяется: к незамещаемым элементам уровня блока (кроме <TABLE> и элементов с displaytable). К ячейкам таблиц — <TD>, <TH> и элементам с displaytable-cell. А также к встроенным блокам — displayinline-block.

Наследуется: нет.

Значения

Значением свойства columns является одно или два (через пробел) значения его подсвойств.

Процентная запись: не существует.

Значение по умолчанию: зависит от значений по умолчанию каждого подсвойства columns.

Синтаксис

columns: column-count || column-width

Пример CSS: использование columns

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - CSS свойство columns</title>
  <style type="text/css">
   body {
    columns: 3 200px; /* рекомендуемое количество и ширина колонок */
    column-gap: 1cm; /* расстояние между колонками */
    column-rule: 2px #f00 dashed; /* стили линий между колонками */
   }
  </style>
 </head>
 <body>
  <p>Lorem ipsum dolor sit amet consectetuer Morbi nibh tempus a neque. Sed dis non
     Vestibulum tellus at adipiscing id interdum ipsum turpis. Malesuada orci Aliquam
     habitant at nibh Phasellus dolor ut enim tortor. Fames id ac eget velit Nullam
     porttitor laoreet Aenean Lorem Phasellus. Pede eros ligula et non libero neque Nam
     congue dolor vel. Nam eget felis laoreet sed cursus libero Sed leo purus augue.</p>
 </body>
</html>

Результат примера

Версии CSS

Версия:CSS 1CSS 2CSS 2.1CSS 3
Поддержка:НетНетНетДа

Браузеры

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:6.0 и выше2.0 и выше2.0 и вышеДо 11.111.1 и выше3.1 и выше
Поддержка:НетНетНетНетДаНет