Перейти к содержанию

column-count

Свойство column-count определяет количество колонок в многоколоночном тексте.

Демо

Колонки и таблицы

Синтаксис

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
/* <integer> value */
column-count: 3;

/* Keyword value */
column-count: auto;

/* Global values */
column-count: inherit;
column-count: initial;
column-count: unset;

Значения

<число>

Целое число больше нуля, задающее оптимальное число колонок.

auto

Число колонок вычисляется автоматически на основе других свойств (column-width, column-gap).

Примечание

Firefox поддерживает свойство -moz-column-count.

Safari, Chrome и Аndroid поддерживают свойство -webkit-column-count.

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

1
column-count: auto;

Применяется к блочным элементам (кроме таблиц), ячейкам и элементам, у которых display установлен как inline-block

Спецификации

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

Can I Use multicolumn? Data on support for the multicolumn feature across the major browsers from caniuse.com.

Описание и примеры

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>column-count</title>
        <style>
            .book {
                -moz-column-count: 2;
                -webkit-column-count: 2;
                column-count: 2;
            }
        </style>
    </head>
    <body>
        <div class="book">
            Контрапункт контрастных фактур дает структурный
            midi-контроллер, таким образом объектом имитации
            является число длительностей в каждой из
            относительно автономных ритмогрупп ведущего
            голоса. Протяженность, по определению,
            просветляет флэнжер, хотя это довольно часто
            напоминает песни Джима Моррисона и Патти Смит.
        </div>
    </body>
</html>

Комментарии