Многоколоночность на CSS подробнее. Разбиение текста на колонки

В продолжение своего топика Новое в CSS3: многоколоночность, flexbox, сеточная разметка предлагаю вам перевод статьи с более глубоким погружением в свойство многоколоночности с простыми и наглядными примерами.

Еще газетами и журналами на практике доказано, что разбитый на несколько колонок текст воспринимается намного проще. На веб-страницах до недавнего времени отобразить контент таким образом было проблемой, доходило до того, что верстальщик разделял текст на несколько div"ов. Но все может стать намного проще с CSS3 Multi Column Module.

Создание контента, разбитого на несколько колонок

Используем HTML5-тег article :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc libero magna, venenatis quis aliquet et, rutrum in augue. Donec vel tempor dolor. Donec volutpat fringilla porta. Suspendisse non nulla tortor. Quisque commodo ornare mi, sit amet aliquet justo bibendum non. Integer bibendum convallis sapien, sit amet tincidunt orci placerat in. Integer vitae consequat augue. //и т.д.

Разбиваем текст на две колонки:

Article { -webkit-column-count:2; -moz-column-count:2; column-count:2; }

При помощи свойства column-width можно задать колонкам необходимую ширину:

Article { -moz-column-width: 150px; -webkit-column-width: 150px; column-width: 150px; }

Интервал между колонками

Интервал задается свойством column-gap в px или em, и не может быть отрицательным:

Article { -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; }

Разделитель колонок

Свойство column-rule позволяет добавлять разделитель между колонками, принцип работы схож с border .

Article { -moz-column-rule: 1px dotted #ccc; -webkit-column-rule: 1px dotted #ccc; column-rule: 1px dotted #ccc; }

Объединение колонок

Свойство column-span работает аналогично с colspan в table , объединяя нужные колонки.

Article h1 { -webkit-column-span: all; column-span:all; }

Итог

Благодаря CSS3 Multi Column Module можно очень просто и быстро разбивать тексты на удобочитаемые колонки. Список поддерживаемых браузеров уже достаточен, чтобы примерять мультиколоночность на рабочих проектах. Для устаревших браузеров можно применять специальную

Сегодня мы рассмотрим очень простой элемент адаптивной верстки, такой, как текст в два столбца. Поняв смысл, вы сможете делать и три и четыре столбца, которые, достигая заданной минимальной ширины уходят вниз. Естественно, к тексту можно добавлять картинки, да и абсолютно любые элементы дизайна.
Естественно, в столбцы или колонки, можно добавлять не только текст, но и любой другой контент. Еще такую адаптивную верстку блоков называют плавающей. Из-за чего? Читайте дальше и все поймете.
Приведенные ниже примеры текста в два столбца растягиваются на всю ширину контейнера. В моем случае это примерная область контента в блогах WordPress.

Текст в два столбца из редактора WordPress

Я брал сниппет из примера и просто ставил его путем копипаста через встроенный редактор WordPress в публикацию, все отлично работает. Только редактор нужно переключать в режим HTML

Адаптивная верстка. Текст в два столбца без картинок

Можно добавить кнопку в редактор

Чтобы не прописывать код текста в два столбца каждый раз вручную можно один раз , без использования плагина. Это очень удобно.

Ну и давайте разберемся по очень простому коду адаптивной верстки двух столбцов.
Вот привожу исходник HTML текста в двух столбцах:

div class="left-col" - левая колонка с классом.left-col

div class="right-col" - правая колонка с классом.right-col

div class="clearfix" - специальный блок для отмены float . См. далее.

CSS код адаптивной верстки текста в два столбца :

Left-col, /* левая колонка */ .right-col/* правая колонка */ { width: 50%; /* ширина */ min-width: 180px; /* минимальная ширина сужения */ height: auto; /* высота */ box-sizing: border-box; float: left; /* плавающие блоки */ } .left-col{ padding-right: 10px; /* отступ справа */ } .right-col{ padding-left: 10px; /* отступ слева */ }
/*Cтили для маленьких мониторов*/ @media (max-width: 479px){ .left-col, /* левая колонка */ .right-col/* правая колонка */ { width: 100%; /* ширина */ } .right-col{ padding-left: 0px; /* отступ слева */ } } /* clearfix сбрасывает float*/ .clearfix:after { content: " "; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }

Left-col и.right-col задается ширина не фиксированная, а в процентах - width: 50%; относительная для того, чтобы столбцы растягивались относительно ширины контейнера.

Но, при достижении 180px , каждый столбец больше не уменьшается.
min-width: 180px; - задан минимальный размер колонок.

Естественно, эти размеры можно менять по своему усмотрению. Три столбца, значит ставьте width: 33.3333%; .

height: auto; - высота адаптивных столбцов, она автоматически меняется в зависимости от объема контента в столбцах.

box-sizing: border-box; - желательно прописывать при адаптивной верстке. Свойство, при котором все отступы padding , рамки border и т.д, вписываются в заданный размер контейнера. В нашем случае.left-col и.right-col .

float: left; - свойство, при котором столбцы с текстом выстраиваются горизонтально по очереди. Количество столбцов зависит от заданных ранее относительных размеров. У нас width: 50%; - два столбца.

@media (max-width: 479px) - так называемая точка прерывания. Это значит, что на мониторах, менее 479px каждый столбец растянется на всю ширину монитора. В коде задано:

Left-col и.right-col {width: 100%;}

Точки прерывания

Используя точки прерывания можно с легкостью управлять размерами элементов для разных мониторов.

@media(max-width: 479px){ } @media(max-width: 767px){ } @media(max-width: 991px){ } @media(max-width: 1199px){ } @media(min-width: 480px){ } @media(min-width: 768px){ } @media(min-width: 992px){ } @media(min-width: 1200px){ }

Сложно? Только на первый взгляд. Скачайте исходник и меняя параметры, посмотрите логику. Ну или просто скопируйте код исходника и замените текст на свой.

Адаптивная верстка. Текст в два столбца с картинками

Естественно, в адаптивные столбцы можно добавлять любые элементы. Рассмотрим пример добавления к адаптивным столбцам с текстом картинки.

Для начала сделаем сами картинки адаптивными. Для этого присвоим им какой-то класс и зададим ширину 100%.
Стили CSS для адаптивных картинок

/*Стили для адаптивных картинок*/ .img-responsive{ display: block; max-width: 100%; /* ширина, размеры в процентах*/ height: auto; margin: 20px 0px; /* отступы сверху и снизу */ background: #fff; /* для красоты цвет заполнения */ padding: 4px; /* для красоты внутренние отступы */ border: 1px solid #ddd; /* для красоты рамка серым цветом */ }

Картинки желательно подбирать 500px в ширину, что-бы на маленьких мониторах они растягивались на всю ширину экрана и выглядели красиво.
HTML разметка для адаптивных столбцов с картинками:

В данном уроке мы расскажем о использовании свойств 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 для создания многоколоночного шаблона могут стать отличным инструментом. Но их применение требует тщательной проверки поддержки в различных браузерах.

С их помощью можно изменить внешний вид уже имеющегося проекта без глобальных переделок структуры.

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 предлагает сразу четыре свойства для создания и управления колонками: column-count , column-gap , column-width и column-rule . Для наглядности значения некоторых свойств показаны на рис. 1.

Рис. 1. Стилевые свойства для колонок

• column-count — устанавливает оптимальное число колонок.
• column-gap — расстояние между колонками.
• column-width — оптимальная ширина колонок.
• column-rule — разделительная линия между колонками.

Следует пояснить, что такое «оптимальное число» и «оптимальная ширина». Свойство column-count задаёт не точное количество колонок, а скорее желаемое. Браузер постарается разбить текст именно на столько колонок, но при уменьшении размеров окна будет сокращать число колонок, чтобы сохранить комфортность чтения. Аналогично обстоит и с шириной. Свойство column-width указывает минимальную ширину колонки, при этом браузер это значение может проигнорировать, если размер окна недостаточен для обеспечения заданной ширины колонок.

Браузер Chrome и Safari понимают эти свойства только с префиксом -webkit, а Firefox только с префиксом -moz. Комбинируем свойства для разных браузеров и получаем код, который создаёт трёхколоночный текст (пример 1).

Пример 1. Три колонки

HTML5 CSS 3 IE 9 IE 10 Cr Op Sa Fx

Результат данного примера в браузере Chrome показан на рис. 2. Вместо трёх колонок мы наблюдаем две из-за малой ширины окна браузера. При увеличении размеров окна число колонок вырастет до заданного, при дальнейшем уменьшении ширины окна, наоборот, количество колонок сократится до одной.

Рис. 2. Многоколоночный текст

Чтобы урезать набор применяемых стилевых свойств, можно воспользоваться универсальным свойством columns , оно одновременно устанавливает ширину колонок и их число (пример 2).

Пример 2. Использование columns

Column { -webkit-columns: 200px 3; -moz-columns: 200px 3; columns: 200px 3; -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; -webkit-column-rule: 1px solid #ccc; -moz-column-rule: 1px solid #ccc; column-rule: 1px solid #ccc; }

Опять же, для работы некоторых браузеров требуется добавить свои префиксы. Расстояние между колонок и параметры разделительной линии, если это требуется, приходится задавать дополнительными свойствами. Если column-gap и column-rule не указаны, линия между колонок не отображается, но некоторое минимальное расстояние между колонок в любом случае сохраняется.