Расположение нескольких столбцов (как в журнале) с помощью CSS3

В общем, люди будут терять след при чтении очень длинного контента. Вот почему в печатных СМИ, таких как журналы и газеты, контент делится на несколько столбцов для удобства чтения.

Создание колонки в Интернете – это совсем другая история. Это довольно сложно. На самом деле, не так давно вам может понадобиться разделить содержимое вручную на несколько элементов div и сместить их вправо или влево, а затем указать ширину, отступы, поля, границы и т. Д.

Но теперь все намного проще с Многостолбцовый модуль CSS3, Как видно из названия, этот модуль позволяет нам разделить контент на колонный макет, который мы видим в газетах или журналах.

Поддержка браузера

В настоящее время поддерживается несколько столбцов во всех браузерах – Firefox 2+, Chrome 4+, Safari 3.1+ и Opera 11.1 – за исключением, как и предполагалось, Internet Explorer, но следующая версия, IE10, похоже, начала обеспечивать поддержку этого модуля.

Для остальных браузеров Firefox по-прежнему нуждается в префиксе -moz-, а в Chrome и Safari – -webkit- префикс. Opera не требует никаких префиксов, поэтому мы можем просто использовать официальные свойства.

Источник: Когда я могу использовать многостолбцовый макет CSS3?

Создать несколько столбцов

Прежде чем мы создадим столбцы, мы подготовили несколько текстовых абзацев для демонстрации, завернутые в HTML5

<

article> тег, как следует;

… и укажите ширину для 600px из таблицы стилей, вот и все.

Теперь давайте начнем создавать столбцы.

В приведенном ниже примере мы разделим содержимое на два столбца со свойством column-count. Это свойство сообщит браузеру отображать содержимое в столбцы по указанному номеру и позволит браузеру выбрать правильную ширину для каждого столбца.

статья {
-webkit-колонки подсчет: 2;
-moz-колонки подсчет: 2;
колонка подсчет: 2;
}

Помимо определения по количеству, столбцы можно создавать, указав ширину с помощью свойства column-width и оставив браузер решать, сколько столбцов должно быть создано на месте.

В этом примере мы указываем ширину столбца для 150 пикселей, в результате чего содержимое будет разделено на три столбца.

статья {
-moz-column-width: 150px;
-webkit-column-width: 150px;
ширина столбца: 150 пикселей;
}

Как указано в спецификации. фактическая ширина столбца может быть шире или уже указанной ширины столбца в зависимости от доступного пространства. Кроме того, если значение ширины не указано явно, в качестве значения по умолчанию будет выбрано «auto», что также может означать «нет столбца».
Разрыв колонки
Разрыв столбцов определяет пространства, которые разделяют каждый столбец. Значение промежутка может быть указано в em или px, но, как указано в спецификации, значение не может быть отрицательным. В приведенном ниже примере мы указываем промежуток для 30 пикселей, поэтому промежутки между столбцами выглядят немного шире.

статья {
-webkit-column-gap: 30px;
-moz-column-gap: 30px;
пробел в колонке: 30 пикселей;
}

Правило столбца
Если вы хотите добавить границы между столбцами, вы можете использовать свойство column-rule, которое работает очень похоже на свойство border. Итак, допустим, если мы хотим поставить пунктирную границу между столбцами, мы можем написать;

статья {
-moz-column-rule: 1px пунктирная #ccc;
-webkit-column-rule: 1px пунктирная #ccc;
правило столбца: 1px пунктирная #ccc;
}

Колонка пролет
Это свойство работает очень похоже на Объединение столбцов в табличном теге. Обычной реализацией этого свойства является охват заголовка контента по всем столбцам. Вот пример.

статья h1 {
-webkit-column-span: все;
Колонка период: все;
}

В приведенном выше примере мы определили h1 для охвата всех столбцов, и если указан диапазон столбцов, 1 будет принято по умолчанию. К сожалению, это свойство на момент написания этой статьи работает только в Opera и Chrome.

Заключительные слова

На этом пока все, мы прошли через все необходимое для создания нескольких столбцов с помощью CSS3, и, как мы упоминали в начале, этот модуль очень хорошо работает в современных браузерах, но еще не работает в Internet Explorer.

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