Расположение нескольких столбцов (как в журнале) с помощью CSS3
В общем, люди будут терять след при чтении очень длинного контента. Вот почему в печатных СМИ, таких как журналы и газеты, контент делится на несколько столбцов для удобства чтения..
Создание колонки в Интернете - это совсем другая история. Это довольно сложно. На самом деле, не так давно вам может понадобиться разделить контент вручную на несколько ДИВs и переместите его вправо или влево, затем укажите ширину, отступы, поля, границы и т. д..
Но теперь все намного проще с Многостолбцовый модуль CSS3. Как видно из названия, этот модуль позволяет нам разделить контент на колонку, которую мы видим в газетах или журналах..
Поддержка браузера
В настоящее время поддерживается несколько столбцов во всех браузерах - Firefox 2+, Chrome 4+, Safari 3.1+ и Opera 11.1 - за исключением, как и предполагалось, Internet Explorer, но следующая версия, IE10, похоже, начала обеспечивать поддержку этого модуля.
Для остальных браузеров Firefox все еще нуждается в -Мос- префикс, а Chrome и Safari нужны -WebKit- префикс. Opera не требует никаких префиксов, поэтому мы можем просто использовать официальные свойства.
Источник: Когда я могу использовать многостолбцовый макет CSS3?
Создать несколько столбцов
Прежде чем мы создадим столбцы, мы подготовили несколько текстовых абзацев для демонстрации, завернутые в HTML5 тег, как следует;
Lorem Ipsum Dolor Sit Amet, Concetetur Adipiscing Elit. Nunc libero magna, venenatis quis aliquet et, rutrum в augue. Donec Vel Tempor Dolor. Donec volutpat fringilla porta. Приостановить не Nulla пытки. Quisque Коммодо Орнаре ми, сидеть амет алике хусто бибендум нон. Integer bibendum convallis sapien, sit amet tincidunt orci placerat in. Integer vitae Последовательность augue. //и так далее
… И укажите ширину для 600px из таблицы стилей, вот и все.
Теперь давайте начнем создавать столбцы.
В приведенном ниже примере мы разделим содержимое на две колонки с колонка подсчета имущество. Это свойство сообщит браузеру отображать содержимое в столбцы по указанному номеру и позволит браузеру выбрать правильную ширину для каждого столбца..
article -webkit-column-count: 2; -moz-колонки подсчет: 2; колонка подсчет: 2;
Помимо определения по количеству, столбцы могут быть созданы путем указания ширины с помощью ширина колонки свойство и оставив браузер, чтобы решить, сколько столбцов должны быть созданы на месте.
В этом примере мы указываем ширину столбца для 150px, что привело к разделению контента на три колонки.
article -moz-column-width: 150px; -webkit-column-width: 150px; ширина столбца: 150 пикселей;
Как указано в спецификации. фактическая ширина столбца может быть шире или уже указанной ширины столбца в зависимости от доступного пространства. Кроме того, если значение ширины не указано явно, “авто” будет принят по умолчанию, что также может означать “нет столбца”.
Разрыв колонки
Разрыв колонки определить пробелы, которые разделяют каждый столбец. Значение разрыва может быть указано в Эм или же ПВ, но как указано в спецификации значение не может быть отрицательным. В приведенном ниже примере мы указываем разрыв для 30px, поэтому промежутки между колоннами выглядят немного шире.
article -webkit-column-gap: 30px; -moz-column-gap: 30px; пробел в колонке: 30 пикселей;
Правило столбца
Если вы хотите добавить границы между столбцами, вы можете использовать колонного правило свойство, которое работает очень похоже на граница имущество. Итак, скажем, если мы хотим поставить пунктирную границу между столбцами, мы можем написать;
article -moz-column-rule: 1px dotted #ccc; -webkit-column-rule: 1px пунктирная #ccc; правило столбца: 1px пунктирная #ccc;
Колонка пролет
Это свойство работает очень похоже на Объединение столбцов в Таблица тег. Обычная реализация этого свойства - охватить заголовок содержимого по всем столбцам. Вот пример.
article h1 -webkit-column-span: все; Колонка период: все;
В приведенном выше примере мы определили h1 охватить все столбцы, и если указан диапазон столбцов, 1 будет принят по умолчанию. К сожалению, это свойство, на момент написания этой статьи, работает только в Opera и Chrome.
Заключительные слова
Пока это все, мы прошли через все необходимые вещи для создания нескольких столбцов с помощью CSS3, и, как мы упоминали в начале, этот модуль очень хорошо работает в современных браузерах, но еще не работает в Internet Explorer..
В конечном счете, мы надеемся, что у вас теперь есть достаточно хорошее понимание того, как создавать столбцы с помощью CSS3, и если у вас есть время для экспериментов, не стесняйтесь делиться своими методами и результатами в поле для комментариев ниже. Спасибо за чтение этого поста и весело провести время.
- демонстрация
- Скачать исходный код
