CSS3 Multi-колонки макета
Макет CSS3 нескольких столбцов позволяет легко определение нескольких столбцов текста - так же, как в газетах:
Ежедневно 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- или -moz- указать первую версию , которая работала с приставкой.
| Имущество | |||||
|---|---|---|---|---|---|
| column-count | 50.0 4.0 -webkit- |
10.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 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
| column-rule | 50.0 4.0 -webkit- |
10.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 | 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 | 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 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
| column-width | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
Свойства CSS3 нескольких столбцов
В этой главе вы узнаете о следующих свойствах нескольких столбцов:
-
column-count -
column-gap -
column-rule-style -
column-rule-width -
column-rule-color -
column-rule -
column-span -
column-width
CSS3 Создание нескольких столбцов
column-count свойство задает число столбцов элемент должен быть разделен на.
В следующем примере будет делить текст в <div> элемент в 3 колонки:
пример
div
{
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
Попробуй сам " CSS3 Укажите разрыв между колонками
column-gap свойство задает промежуток между столбцами.
Следующий пример определяет зазор 40 пикселей между колонками:
пример
div
{
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
}
Попробуй сам " Правила Колонка CSS3
column-rule-style свойство определяет стиль правила между колоннами:
пример
div
{
-webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
-moz-column-rule-style: solid; /* Firefox */
column-rule-style: solid;
}
Попробуй сам " column-rule-width свойство задает ширину линейки между колонками:
пример
div
{
-webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
-moz-column-rule-width: 1px; /* Firefox */
column-rule-width: 1px;
}
Попробуй сам " column-rule-color свойство задает цвет правила между колоннами:
пример
div
{
-webkit-column-rule-color: lightblue; /* Chrome, Safari, Opera */
-moz-column-rule-color: lightblue; /* Firefox */
column-rule-color: lightblue;
}
Попробуй сам " column-rule свойство является сокращённое свойство для установки всех столбцов-rule- * свойства выше.
Следующий пример устанавливает ширину, стиль и цвет правило между колоннами:
пример
div
{
-webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
-moz-column-rule: 1px solid lightblue; /* Firefox */
column-rule: 1px solid lightblue;
}
Попробуй сам " Укажите, сколько столбцов Элемент должны охватывать
column-span свойство определяет , сколько колонок элемент должен охватывать поперек.
Следующий пример указывает , что <h2> элемент должен охватывать во всех колонках:
пример
h2 {
-webkit-column-span: all; /* Chrome, Safari, Opera */
column-span: all;
}
Попробуй сам " Укажите ширину столбца
column-width свойство определяет рекомендуемую, оптимальную ширину столбцов.
Следующий пример указывает, что предложенная, оптимальная ширина для колонн должна быть 100px:
пример
div {
-webkit-column-width: 100px; /* Chrome, Safari, Opera */
column-width: 100px;
}
Попробуй сам " CSS3 Multi-столбцов Свойства
В следующей таблице перечислены все свойства мульти-колонки:
| Имущество | Описание |
|---|---|
| column-count | Определяет количество столбцов элемент должен быть разделен на |
| column-fill | Указывает, как заполнять столбцы |
| column-gap | Определяет промежуток между столбцами |
| column-rule | Сокращённое свойство для установки всех столбцов-rule- * свойства |
| column-rule-color | Определяет цвет правила между колоннами |
| column-rule-style | Определяет стиль правила между колоннами |
| column-rule-width | Определяет ширину линейки между колонками |
| column-span | Определяет, сколько колонок элемент должен охватывать через |
| column-width | Определяет рекомендуемый, оптимальную ширину столбцов |
| columns | Сокращённое свойство для установки ширины столбца и столбца-счетчика |