• Сервис онлайн-записи на собственном Telegram-боте
    Тот, кто работает в сфере услуг, знает — без ведения записи клиентов никуда. Мало того, что нужно видеть свое расписание, но и напоминать клиентам о визитах тоже. Нашли самый бюджетный и оптимальный вариант: сервис VisitTime.
    Для новых пользователей первый месяц бесплатно.
    Чат-бот для мастеров и специалистов, который упрощает ведение записей:
    Сам записывает клиентов и напоминает им о визите;
    Персонализирует скидки, чаевые, кэшбэк и предоплаты;
    Увеличивает доходимость и помогает больше зарабатывать;
    Начать пользоваться сервисом
  • Как продвинуть сайт на первые места?
    Вы создали или только планируете создать свой сайт, но не знаете, как продвигать? Продвижение сайта – это не просто процесс, а целый комплекс мероприятий, направленных на увеличение его посещаемости и повышение его позиций в поисковых системах.
    Ускорение продвижения
    Если вам трудно попасть на первые места в поиске самостоятельно, попробуйте технологию Буст, она ускоряет продвижение в десятки раз, а первые результаты появляются уже в течение первых 7 дней. Если ни один запрос у вас не продвинется в Топ10 за месяц, то в SeoHammer за бустер вернут деньги.
    Начать продвижение сайта
УРОКИ 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 - 2022 Уроки CSS