Несколько колонок CSS3
С CSS3, Вы можете создать несколько колонок для разметки текста - как в газетах!
В этой главе вы узнаете о следующих свойствах нескольких колонок:
- column-count
- column-gap
- column-rule
Internet Explorer не поддерживает свойства нескольких колонок.
Firefox требует префикс -moz-.
Chrome и Safari требуют префикс -webkit-.
Создание нескольких колонок в CSS3
Свойство column-count определяет число столбцов на которые элемент должен быть разделен<style>
.newspaper
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
}
</style>
Определение разрыва между колонками CSS3
Свойство column-gap определяет разрыв между колонками:
<style>
.newspaper
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;
}
</style>Правила колонок CSS3
Свойство column-rule определяет ширину, стиль и цвет между колонками.
Новые свойства нескольких колонок
| Свойство | Описание | CSS |
|---|---|---|
| column-count | Определяет количество колонок на которые элемент должен быть разделен | 3 |
| column-fill | Определяет, как заполнять колонки | 3 |
| column-gap | Определяет промежуток между колонками | 3 |
| column-rule | Сокращенное свойство для установки всех свойств column-rule-* | 3 |
| column-rule-color | Определяет правило цвета между колонками | 3 |
| column-rule-style | Определяет правило стиля между колонками | 3 |
| column-rule-width | Определяет правило ширины между колонками | 3 |
| column-span | Определяет, на сколько колонок элемент должен распределен | 3 |
| column-width | Указывает ширину колонок | 3 |
| columns | Сокращенное свойство для установки column-width и column-count | 3 |