0 комментариев
Нет комментариев
Спецификация макет с несколькими столбцами даёт вам метод вёрстки контента по столбцам, точно также как вы можете видеть в газете. Эта статья объясняет, как использовать эту функцию.
Спецификация макет с несколькими столбцами даёт вам метод вёрстки контента по столбцам, точно также как вы можете видеть в газете. Эта статья объясняет, как использовать эту функцию.
Сейчас мы будем изучать как использовать макет с несколькими столбцами, часто называемый multicol. Вы можете следовать за нами скачав файл отправной точки multicol и добавлять CSS в соответствующие места. В конце раздела вы можете посмотреть живой пример того, как конечный код должен выглядеть.
Наша отправная точка содержит немного очень простого HTML; обёртка с классом container внутри которого имеется заголовок и несколько параграфов.
<div> с классом контейнер станет нашим multicol контейнером. Мы включаем multicol используя одно из двух свойств column-count или column-width (en-US). Какое значение вы дадите свойству column-count столько столбцов он и создаст, поэтому если вы добавите следующий CSS в ваши стили и перезагрузите страницу, то получите три столбца:
Колонки, которые вы создаёте имеют гибкую ширину — браузер решает какое пространство назначить каждому столбцу.
Измените ваш CSS чтобы использовать следующий column-width:
Теперь браузер будет давать столько столбцов размером, который вы определили, сколько он сможет; любое оставшееся пространство далее делится между существующими столбцами. Это значит, что вы не получите точную ширину, которую вы задали, только если ваш контейнер не делится точно на эту ширину.
Столбцы, созданные при помощи multicol не могут быть стилизованы по одному. Нет способа сделать один столбец больше, чем другие, или изменить фон или цвет текста одного столбца. У вас есть две возможности изменить способ отображения столбцов:
column-gap.column-rule.Используя ваш пример выше, измените размер отступа добавлением свойства column-gap:
Вы можете поиграть с разными значениями — свойство принимает любые единицы измерения длины. Теперь добавьте линейку между столбцами при помощи column-rule. Таким же способом как и свойство border с которым вы сталкивались в предыдущих уроках, column-rule — это короткая запись column-rule-color, column-rule-style и column-rule-width (en-US) и принимает те же значения что и border.
Попробуйте добавить линейки других стилей и цветов.
Следует обратить внимание на то, что линейка не занимает никакой ширины. Она располагается в промежутках, которые вы создали при помощи column-gap. Чтобы придать больше пространства по обе стороны от линейки, вам нужно увеличить размер column-gap.
Вы можете заставить элемент растянуться через все столбцы. В этом случае контент разрывается, когда сталкивается со spanning элементом и продолжается ниже, создавая новый набор блоков столбцов. Чтобы растянуть элемент через все столбцы используйте свойство column-span (en-US) установленное на значение all.
Примечание: Обратите внимание что невозможно растянуть элемент через несколько столбцов. Это свойство может иметь либо значение none (по умолчанию) либо all.
Содержимое макета нескольких столбцов является фрагментированным. По сути, он ведёт себя так же, как контент в постраничных медиа — так же, как когда вы печатаете веб-страницы. Когда вы переводите ваш контент в multicol контейнер он фрагментируется на столбцы и контент разбивается чтобы позволить этому произойти.
Порой это разрывание происходит в местах, мешающих чтению. В живом примере ниже, я использовал multicol чтобы разместить несколько блоков, каждый из которых имеет заголовок и немного текста внутри. Заголовок отделяется от текста, если столбцы разделяются между ними.
Для того чтобы управлять этим поведением мы можем использовать свойства из спецификации CSS Фрагментации (en-US). Эта спецификация даёт нам свойства для управления разрывами контента в multicol и постраничных медиа. Например, добавьте свойство break-inside (en-US) со значением avoid к правилам .card. Это контейнер заголовка и текста и поэтому мы не хотим фрагментировать этот блок.
В настоящее время также стоит добавлять старое свойство page-break-inside: avoid для лучшей поддержки старых браузеров.
Перезагрузите страницу и ваши блоки должны остаться в целости.
Вы достигли конца этой статьи, но помните ли вы самую важную информацию? Вы можете найти дальнейшие тесты для проверки того, что вы усвоили эту информацию прежде чем, отправитесь дальше — см. Поверьте свои навыки: Макет с несколькими столбцами.
Вы теперь знаете, как использовать базовые функции макета с несколькими столбцами, ещё один инструмент в вашем распоряжении при выборе метода макета для дизайна который вы строите.