CSS Несколько столбцов
CSS3 Макет из нескольких столбцов
CSS3 многостолбчатый макет, позволяет легко определить несколько столбцов текста - как в газетах:
Ежедневник
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.
Поддержка браузеров
Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
| Свойство | |||||
|---|---|---|---|---|---|
| column-count | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
| column-gap | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
| column-rule | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
| column-rule-color | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
| column-rule-style | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
| column-rule-width | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
| column-span | 50.0 | 10.0 | 71.0 | 9.0 | 37.0 |
| column-width | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
CSS3 Свойства несколько столбцов
В этой главе вы узнаете о следующих свойствах нескольких столбцов:
column-countcolumn-gapcolumn-rule-stylecolumn-rule-widthcolumn-rule-colorcolumn-rulecolumn-spancolumn-width
Создать несколько столбцов
Свойство column-count задает количество колонн, элемент должен разделиться на.
В следующем примере текст в элементе <div> будет разделен на 3 столбца:
div {
column-count: 3;
}
Попробуйте сами »
Зазор между столбцами
Свойство column-gap определяет промежуток между столбцами.
В следующем примере указывается зазор между столбцами 40 пикселей:
div {
column-gap: 40px;
}
Попробуйте сами »
CSS3 Правила столбцов
Свойство 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 является сокращенным свойством для установки всех свойств правил столбцов - * ниже.
В следующем примере задается ширина, стиль и цвет между столбцами:
div {
column-rule: 1px solid lightblue;
}
Попробуйте сами »
Указать, сколько столбцов должен занимать элемент
Свойство column-span указывает, сколько столбцов должен занимать элемент.
В следующем примере показано, что элемент <h2> должен охватывать все столбцы:
h2 {
column-span: all;
}
Попробуйте сами »
Указать ширину столбцов
Свойство column-width указывает рекомендуемую оптимальную ширину столбцов.
В следующем примере показано, что рекомендуемая оптимальная ширина столбцов, должна быть 100 пикселей:
div {
column-width: 100px;
}
Попробуйте сами »
CSS3 Свойства столбцов
В следующей таблице перечислены все свойства столбцов:
| Свойство | Описание |
|---|---|
| column-count | Указывает количество столбцов, на которые должен быть разделен элемент |
| column-fill | Указывает, как заполнять столбцы |
| column-gap | Определяет зазор между столбцами |
| column-rule | Сокращенное свойство для установки всех свойств правил столбца -* |
| column-rule-color | Задает цвет правила между столбцами |
| column-rule-style | Задает стиль правила между столбцами |
| column-rule-width | Задает ширину правила между столбцами |
| column-span | Указывает, сколько столбцов должен занимать элемент |
| column-width | Указывает рекомендуемую оптимальную ширину столбцов |
| columns | Сокращенное свойство для установки ширины и количества столбцов |