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

column-count

Свойство CSS column-count используется для указания рекомендуемого числа колонок (столбцов) элемента, на которые будет разбит текст. Если количество колонок окажется настолько большой, что они не будут входить в ширину элемента, то их число будет уменьшено.

Вместо column-count можно применять универсальное свойство columns.

Тип свойства

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

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

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

Значения

Значением свойства column-count является один из следующих вариантов.

  • auto — число колонок будет вычисляться исходя из значений других свойств, например column-gap.
  • Число — целое положительное число (больше нуля), которое указывает рекомендуемое число колонок, а если значение column-width не равно auto, то максимальное число колонок.

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

Значение по умолчанию: auto.

Синтаксис

column-count: auto | число

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - CSS свойство column-count</title>
  <style type="text/css">
   body {
    column-count: 2; /* количество колонок */
    column-gap: 1em; /* расстояние между колонками */
   }
  </style>
 </head>
 <body>
  <p>Lorem ipsum dolor sit amet consectetuer quis ut Suspendisse felis ridiculus.
     Massa non habitant sit faucibus Sed consequat Integer orci magnis dolor. Massa
     Curabitur et ut mus quam nibh vestibulum lorem libero ac. Lacinia odio Vestibulum
     lorem sem Curabitur ipsum pellentesque eget ligula non. Nulla adipiscing fringilla
     id est Curabitur magna nulla nisl commodo nascetur. Et ridiculus montes Morbi et
     et vel facilisis elit sollicitudin Curabitur. Iaculis senectus Morbi nibh felis
     netus at nonummy tempor tempus semper. Ridiculus Phasellus semper gravida
     nibh Praesent scelerisque non vitae congue.</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 и выше
Поддержка:НетНетНетНетДаНет
CSS по алфавиту
CSS по назначению