• CSS3 Уроки

• CSS3 Уроки
• CSS3 Введение
• CSS3 Границы
• CSS3 Фон
• CSS3 Текстовые Эффекты
• CSS3 Шрифты
• CSS3 2D Трансформации
• CSS3 3D Трансформации
• CSS3 Переходы
• CSS3 Анимация
• CSS3 Многоколоночная Верстка
• CSS3 Интерфейс Пользователя

• CSS3 Справочники

• CSS3 Справочник
• CSS3 Единицы Измерения
• CSS3 Значения Цветов
• CSS3 Названия Цветов
• CSS3 HEX Значения Цветов

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

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

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

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

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

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

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

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

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

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

Пример Разбивка текста в элементе div на три колонки: div { -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari и Chrome */ column-count:3; } Попробуйте сами »

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

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

Пример Указать расстояние между колонками в 40 пикселов: div { -moz-column-gap:40px; /* Firefox */ -webkit-column-gap:40px; /* Safari и Chrome */ column-gap:40px; } Попробуйте сами »

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

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

Пример Указать ширину, стиль и цвет линейки между колонками: div { -moz-column-rule:3px outset #ff00ff; /* Firefox */ -webkit-column-rule:3px outset #ff00ff; /* Safari и Chrome */ column-rule:3px outset #ff00ff; } Попробуйте сами »

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