Используем несколько колонок. Цвет разделительной линии column-rule-color
CSS3 columns — концепция многоколоночной разметки, которая позволяет разбивать контент на колонки. Колонки могут содержать заголовки, текст, таблицы, картинки и любые другие inline -элементы.
Создание многоколоночной разметки с помощью модели CSS3 columns
Поддержка браузерами
IE: 10.0
Firefox: 9.0 -moz-
Chrome: 4.0 -webkit-
Safari: 3.0 -webkit-
Opera: 11.1, 15.0 -webkit-
iOS Safari: 9, 7.1 -webkit-
Opera Mini: 8
Android Browser: 2.1 -webkit-
Chrome for Android: 44 -webkit-
1. Количество колонок column-count
Свойство позволяет явно задать необходимое число колонок, а их ширина будет рассчитываться, исходя из ширины доступного пространства. По умолчанию браузер добавляет промежуток между колонками по горизонтали, равный 1em . Если ширина изображения больше ширины колонки, то оно будет обрезано. Если одновременно с column-count задается column-width , то значение column-count будет считаться максимальным числом колонок (столбцов). Свойство не наследуется.
Синтаксис
Section {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
Рис. 1. Пример многоколоночной разметки
2. Ширина колонок column-width
Свойство позволяет разбить контент на колонки без задания свойства column-count . Количество колонок будет зависеть от того, сколько колонок заданной ширины может поместиться в контейнер. Не наследуется.
Синтаксис
Section { -webkit-column-width: 100px; -moz-column-width: 100px; column-width: 100px; }
3. Ширина пустого пространства между колонками column-gap
Свойство управляет промежутком между колонками. Если для колонок установлена разделительная линия с помощью свойства column-rule , то эта линия будет расположена посредине промежутка, а ее ширина не изменит общую ширину. Свойство не наследуется.
Синтаксис
Section {
-webkit-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px;
}
Рис. 2. Промежутки между колонками
4. Позиционирование элемента на несколько колонок column-span
Свойство задаёт количество колонок, которое пересечет выбранный элемент. Указывается не для блока-контейнера, а для для конкретного элемента внутри, например, для заголовка.
Если нужно, чтобы изображение растянулось на все колонки, задаётся img {display: block; -webkit-column-span: all; column-span: all;} . Свойство не наследуется.
Синтаксис
H1 { -webkit-column-span: all; column-span: all; } Рис. 3. Позиционирование заголовка на все колонки
5. Стиль разделительной линии column-rule-style
Свойство создаёт внутри пустого пространства между колонками вертикальную полосу — разделительную линию. Если не задан цвет линии, то некоторые эффекты не будут отображаться. Не наследуется.
Значения: | |
none | Значение по умолчанию, означает отсутствие линии. Цвет и ширина, заданные для линии, игнорируются. |
hidden | Аналогично со значением none , линия скрыта. |
dotted | Отображает линию набором квадратных точек. |
dashed | Отображает линию как последовательность из тире. |
solid | Обычная линия. |
double | Отображает разделительную линию в виде двух параллельных тонких линий, расположенных на некотором расстоянии между собой. Толщина разделительной линии не указывается, но сумма линий и промежутка между ними равна значению column-rule-width . |
groove | Отображает линию объемной, вдавленной в полотно. Это достигается путем создания тени из двух цветов, один из которых темнее, другой — светлее. |
ridge | Отображает разделительную линию объемной, т.е. эффект, противоположный groove . |
inset | Отображает сплошную линию цветом темнее, чем заданный цвет линии. |
outset | Отображает сплошную линию цветом, заданным свойством column-rule-color . |
initial | Устанавливает значение свойства в значение по умолчанию. |
inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
Section {
-webkit-column-rule-style: dotted;
-moz-column-rule-style: dotted;
column-rule-style: dotted;
}
Рис. 4. Стиль разделительной линии
6. Ширина разделительной линии column-rule-width
Свойство устанавливает ширину разделительной линии. Не работает без свойства column-rule-style . Не наследуется.
Синтаксис
Section {
-webkit-column-rule-style: dotted;
-moz-column-rule-style: dotted;
column-rule-style: dotted;
-webkit-column-rule-width: 10px;
-moz-column-rule-width: 10px;
column-rule-width: 10px;
}
Рис. 5. Ширина разделительной линии
7. Цвет разделительной линии column-rule-color
Свойство позволяет изменить цвет разделительной линии, которая наследует цвет текста. Не наследуется.
Синтаксис
Section {
-webkit-column-rule-style: dotted;
-webkit-column-rule-width: 5px;
-webkit-column-rule-color: #59ACE7;
-moz-column-rule-style: dotted;
-moz-column-rule-width: 5px;
-moz-column-rule-color: #59ACE7;
column-rule-style: dotted;
column-rule-width: 5px;
column-rule-color: #59ACE7;
}
Рис. 6. Цвет разделительной линии
8. Краткая запись стилей разделительной линии column-rule
Свойство позволяет задать в одном объявлении три свойства разделительной линии — ширину column-rule-width , стиль column-rule-style и цвет column-rule-color . Не наследуется.
Синтаксис
Section { -webkit-column-rule: 5px dotted #59ACE7; -moz-column-rule: 5px dotted #59ACE7; column-rule: 5px dotted #59ACE7; }
9. Установка колонок с помощью одного свойства columns
Свойство представляет собой краткую запись свойств column-width и column-count , одновременно задает ширину и количество колонок. Не наследуется.
Синтаксис
Section { -webkit-columns: 100px 3; -moz-columns: 100px 3; columns: 100px 3; }
Макет 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 свойство задает число столбцов элемент должен быть разделен на.
В следующем примере будет делить текст в
CSS3 Укажите разрыв между колонками
column-gap свойство задает промежуток между столбцами.
Следующий пример определяет зазор 40 пикселей между колонками:
Правила Колонка 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 свойство задает ширину линейки между колонками:
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 свойство определяет, сколько колонок элемент должен охватывать поперек.
Следующий пример указывает, что
элемент должен охватывать во всех колонках: Укажите ширину столбца
Следующий пример указывает, что предложенная, оптимальная ширина для колонн должна быть 100px:
CSS3 Multi-столбцов Свойства
В следующей таблице перечислены все свойства мульти-колонки.
В данном уроке мы расскажем о использовании свойств CSS3 для построения многоколночного шаблона. Так как это CSS3, использование его свойств требует предварительной тщательной проверки.
Используем несколько колонок
Для создания нескольких колонок вы можете использовать свойства:
- column-count
- column-width
Первое устанавливает точное количество выводимых колонок, а последнее - ширину каждой колонки. Все остальные параметры колонок будут определяться доступной шириной.
Используем разметку HTML:
Код CSS будет таким:
Div {column-count: 3}
или таким:
Div {column-width: 15em} /* Вы можете использовать также px */
Также доступна короткая запись:
Div {columns: 3 20em}
В короткой записи можно задавать и количество колонок и их ширину. Однако на практике, как правило, требуется только что-то одно.
Определение колонок с помощью свойства column-count больше подходит для резиновых шаблонов, так как ширина колонок будет адаптироваться при изменении ширину экрана браузера.
Контейнеры колонок
Использование свойств column-count или column-width приводит к созданию нового контейнера между внешним элементом и содержанием. Он называется контейнер колонок, хотя для него и нельзя изменять свойства.
Колонки выравниваются в строке. Все контейнеры колонок в строке будут иметь одинаковую высоту, хотя их содержание может существенно отличаться.
Если сделать какой-либо элемент плавающим в контейнере колонки, то он будет ограничен именно контейнером колонки, а не внешним контейнером. Также будет работать задание ширины элемента колонки в % - ширина будет рассчитываться от ширины контейнера колонки, а не внешнего контейнера.
Интервалы и разделители колонок
Имеется небольшой контроль над колонками. Мы можем задавать интервал между колонками с помощью свойства column-gap . По умолчанию свойство column-gap имеет значение 1em.
Div {column-gap: 2em}
Также можно устанавливать вертикальный разделитель с помощью свойства column-rule:
Div {column-rule: thin solid #ccc}
Короткая запись может быть представлена 3 свойствами, действующими также, как и при определении рамок элементов:
- column-rule-width
- column-rule-style
- column-rule-color
Интервал равен по высоте контейнеру колонок, а разделитель помещается в центр интервала. Интервал и разделитель имеют одинаковую высоту. Если колонка не имеет содержания, разделитель между ней и соседними колонками не будет выводиться.
Заполнение колонок и размах
Вероятно, что вы не будете часто использовать указание заполнения колонок с помощью свойства column-fill . Это способ указать браузеры сколько содержания нужно разместить в каждой колонке.
Вы можете использовать значения auto (автоматически, установлено по умолчанию) или balance (сбалансировано), которое вынудить браузер попытаться заполнить колонки равномерно. На практике большой разницы между результатами использования данных значений не заметно.
Размах, устанавливаемый с помощью свойства сolumn-span , значительно более полезная настройка. Он позволяет элементу HTML растянуться на несколько колонок. На выше приведенном рисунке заголовок использует именно это свойство.
H2 {column-span: all}
Возможны только два значения - all (все) или none (ничего). Использовать 2 из 3 колонок не получится.
Прерывание колонок
Имеется три похожих свойства, которые можно использовать для прерыванием содержания в колонке вокруг элемента.
- До элемента - break-before:
- В элементе - break-inside: auto | always | avoid | left | right | page | column | avoid-page | avoid-column
- После элемента - break-after: auto | avoid | avoid-page | avoid-column
Определения используемых значений:
- auto — Генерация или запрещение разрывов страницы/колонки отключены.
- always
- avoid — Запретить разрыв страницы/колонки.
- left — Генерировать один или два разрыва страницы так, чтобы следующая страница форматировалась как страница слева.
- right — Генерировать один или два разрыва страницы так, чтобы следующая страница форматировалась как страницы справа.ы
- page — Всегда генерировать разрыв страницы.
- column — Всегда генерировать разрыв колонки.
- avoid-page — Запретить разрыв страницы.
- avoid-column — Запретить разрыв колонки.
Смысл всех данных свойств и значений заключается в том, чтобы определённое содержание начиналось с новой колонки.
Если изображение или непрерывное слово превышает ширину колонки, то оно будет обрезано в середине интервала, где размещается разделитель.
Возможно ограничить колонки так, что элемент будет иметь больше колонок, чем места для вывода:
- Ограничение высоты колонки может привести к появлению дополнительных колонок, а не к появлению достаточного пространства для вывода.
- Ограничение размера страницы может привести к тому, что дополнительные колонки будут перемещены на следующую страницу.
- Задание разрыва колонки может привести к тому, что дополнительная колонка будет выведена вне доступного пространства для вывода или на следующей странице.
Заключение
Свойства CSS3 для создания многоколоночного шаблона могут стать отличным инструментом. Но их применение требует тщательной проверки поддержки в различных браузерах.
С их помощью можно изменить внешний вид уже имеющегося проекта без глобальных переделок структуры.
Данное свойство входит в свойство-сокращение columns .
См. все свойства для многоколоночности: column-count , column-width , column-gap , column-rule , column-span , columns .
Синтаксис
Селектор { column-count: число | auto; }
Значения
Значение по умолчанию: auto .
Примеры
Пример
В данном примере текст разобьется на 3 колонки (конечно же, в браузерах, которые поддерживают многоколоночность, в остальных будет просто обычный текст в одну колонку):
#elem { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; text-align: justify; }
Результат выполнения кода:
Пример . Значение auto
В данном примере указана ширина колонки column-width в 150px , а их количество column-count стоит в значении auto - браузер сам подберет необходимое количество колонок и промежуток между ними:
#elem { -webkit-column-count: auto; -moz-column-count: auto; column-count: auto; -webkit-column-width: 150px; -moz-column-width: 150px; column-width: 150px; text-align: justify; }
Результат выполнения кода:
Быть энтузиасткой сделалось ее общественным положением, и иногда, когда ей даже того не хотелось, она, чтобы не обмануть ожиданий людей, знавших ее, делалась энтузиасткой. Сдержанная улыбка, игравшая постоянно на лице Анны Павловны, хотя и не шла к ее отжившим чертам, выражала, как у избалованных детей, постоянное сознание своего милого недостатка, от которого она не хочет, не может и не находит нужным исправляться. В середине разговора про политические действия Анна Павловна разгорячилась. - Ах, не говорите мне про Австрию! Я ничего не понимаю, может быть, но Австрия никогда не хотела и не хочет войны. Она предает нас. Россия одна должна быть спасительницей Европы. Наш благодетель знает свое высокое призвание и будет верен ему. Вот одно, во что я верю. Нашему доброму и чудному государю предстоит величайшая роль в мире, и он так добродетелен и хорош, что Бог не оставит его, и он исполнит свое призвание задавить гидру революции, которая теперь еще ужаснее в лице этого убийцы и злодея. Мы одни должны искупить кровь праведника… На кого нам надеяться, я вас спрашиваю?… Англия с своим коммерческим духом не поймет и не может понять всю высоту души императора Александра. Она отказалась очистить Мальту. Она хочет видеть, ищет заднюю мысль наших действий. Что они сказали Новосильцову?… Ничего. Они не поняли, они не могут понять самоотвержения нашего императора, который ничего не хочет для себя и все хочет для блага мира. И что они обещали? Ничего. И что обещали, и того не будет! Пруссия уж объявила, что Бонапарте непобедим и что вся Европа ничего не может против него… И я не верю ни в одном слове ни Гарденбергу, ни Гаугвицу. Cette fameuse neutralite prussienne, ce n`est qu`un piege. [Этот пресловутый нейтралитет Пруссии - только западня. ] Я верю в одного Бога и в высокую судьбу нашего милого императора. Он спасет Европу!.. - Она вдруг остановилась с улыбкою насмешки над своею горячностью. - Я думаю, - сказал князь улыбаясь, - что ежели бы вас послали вместо нашего милого Винценгероде, вы бы взяли приступом согласие прусского короля. Вы так красноречивы. Вы дадите мне чаю?