Рейтинг@Mail.ru
УРОКИ CSS CSS3 ПРИМЕРЫ CSS СПРАВОЧНИК CSS РЕКЛАМА

CSS3 Многоколоночная Верстка


« Назад Далее »

CSS3 Многоколоночная Верстка

С CSS3 вы можете создавать несколько колонок для компоновки текста - как в газетах!

В этом уроке вы узнаете о следующих свойствах многоколоночной верстки:

  • column-count
  • column-gap
  • column-rule

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

Свойство Поддержка Браузерами
column-count
column-gap
column-rule

Internet Explorer пока еще не поддерживает свойства многоколоночной верстки.

Firefox требует приставки -moz-.

Chrome и Safari требуют приставки -webkit-.


CSS3 Создание Нескольких Колонок

Свойство column-count указывает количество колонок, на которое элемент должен быть разделен:

Opera Safari Chrome Firefox Internet Explorer

Пример

Разбивка текста в элементе div на три колонки:

div
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari и Chrome */
column-count:3;
}

Попробуйте сами »


CSS3 Указание Интервала Между Колонками

Свойство column-gap указывает интервал (расстояние) между колонками:

Opera Safari Chrome Firefox Internet Explorer

Пример

Указать расстояние между колонками в 40 пикселов:

div
{
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari и Chrome */
column-gap:40px;
}

Попробуйте сами »


CSS3 Линейки Между Колонками

Свойство column-rule устанавливает ширину, стиль и цвет линейки (вертикальной линии) между колонками.

Opera Safari Chrome Firefox Internet Explorer

Пример

Указать ширину, стиль и цвет линейки между колонками:

div
{
-moz-column-rule:3px outset #ff00ff; /* Firefox */
-webkit-column-rule:3px outset #ff00ff; /* Safari и Chrome */
column-rule:3px outset #ff00ff;
}

Попробуйте сами »


Новые Свойства Многоколоночной Верстки

Свойство Описание 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






« Назад Далее »
© 2011-2017 Уроки CSS
Рейтинг@Mail.ru