CSS Multiple Columns
CSS-макет с несколькими колонками
CSS мульти-колонки макета позволяет легко определить несколько столбцов текста-так же, как в газетах:
Daily Ping
Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta
nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
Поддержка браузера
Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Номера -WebKit- или -МОЗ- укажат первую версию, которая работала с префиксом.
| Свойство | |||||
|---|---|---|---|---|---|
| column-count | 50.0 4.0 -webkit- |
10.0 | 52.0 2.0 -moz- |
9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
| column-gap | 50.0 4.0 -webkit- |
10.0 | 52.0 2.0 -moz- |
9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
| column-rule | 50.0 4.0 -webkit- |
10.0 | 52.0 2.0 -moz- |
9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
| column-rule-color | 50.0 4.0 -webkit- |
10.0 | 52.0 2.0 -moz- |
9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
| column-rule-style | 50.0 4.0 -webkit- |
10.0 | 52.0 2.0 -moz- |
9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
| column-rule-width | 50.0 4.0 -webkit- |
10.0 | 52.0 2.0 -moz- |
9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
| column-span | 50.0 4.0 -webkit- |
10.0 | Not supported | 9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
| column-width | 50.0 4.0 -webkit- |
10.0 | 52.0 2.0 -moz- |
9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
Свойства нескольких столбцов CSS
В этой главе вы узнаете о следующих свойствах нескольких столбцов:
column-countcolumn-gapcolumn-rule-stylecolumn-rule-widthcolumn-rule-colorcolumn-rulecolumn-spancolumn-width
CSS создать несколько столбцов
Свойство column-count указывает количество столбцов, в которые должен быть разделен элемент.
В следующем примере текст в элементе <div> разделяется на 3 столбца:
Пример
div
{
column-count: 3;
}
CSS укажите зазор между столбцами
Свойство column-gap указывает зазор между столбцами.
В следующем примере указывается зазор между столбцами в 40 пикселей:
Пример
div
{
column-gap: 40px;
}
Правила столбцов CSS
Свойство column-rule-style задает стиль правила между столбцами:
Пример
div
{
column-rule-style: solid;
}
Свойство column-rule-width задает ширину правила между столбцами:
Пример
div
{
column-rule-width: 1px;
}
Свойство column-rule-color определяет цвет правила между столбцами:
Пример
div
{
column-rule-color: lightblue;
}
Свойство column-rule является сокращенным свойством для установки всех свойств Column-Rule-* выше.
В следующем примере устанавливается ширина, стиль и цвет правила между столбцами:
Пример
div
{
column-rule: 1px solid lightblue;
}
Укажите, сколько столбцов должен охватывать элемент
Свойство column-span указывает, сколько столбцов должен охватывать элемент.
В следующем примере указывается, что элемент < H2 > должен охватывать все столбцы:
Пример
h2 {
column-span: all;
}
Укажите ширину столбца
Свойство column-width указывает рекомендуемую оптимальную ширину столбцов.
В следующем примере указывается, что рекомендуемая Оптимальная ширина столбцов должна быть 100px:
Пример
div {
column-width: 100px;
}
Свойства нескольких столбцов CSS
В следующей таблице перечислены все свойства нескольких столбцов:
| Свойство | Описание |
|---|---|
| column-count | Указывает количество столбцов, элемент должен быть разделен на |
| column-fill | Задает способ заполнения столбцов |
| column-gap | Указывает зазор между столбцами |
| column-rule | Сокращенное свойство для установки всех свойств столбца-Rule-* |
| column-rule-color | Задает цвет правила между столбцами |
| column-rule-style | Задает стиль правила между столбцами |
| column-rule-width | Задает ширину правила между столбцами |
| column-span | Указывает, сколько столбцов элемент должен охватывать поперек |
| column-width | Задает рекомендуемую, оптимальную ширину столбцов |
| columns | Сокращенное свойство для задания ширины столбца и счетчика столбцов |