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

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

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

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

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

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

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

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

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

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

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

<

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

Lorem Ipsum Dolor Sit Amet, Concetetur Adipiscing Elit. Nunc libero magna, venenatis quis aliquet et,
Рутрум в Ауге. Donec Vel Tempor Dolor. Donec volutpat fringilla porta. Приостановить не Nulla пытки.
Quisque Коммодо Орнаре ми, сидеть Амет Аликет Хусто Бибендум нон. Целое число bibendum convallis sapien, сидеть
amet tincidunt orci placerat in. Целое число, повторяющее, augue.

//и так далее

… и укажите ширину для 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, и если у вас есть время для экспериментов, не стесняйтесь делиться своими методами и результатами в поле для комментариев ниже. Спасибо за чтение этого поста и весело провести время.

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован.