Уже много лет, CSS плавает были привередливым, но необходимым компонентом при создании макетов веб-сайтов. Если ваш дизайн требовал нескольких столбцов, вы обратились к плавающим. Проблема с этим методом заключается в том, что, несмотря на невероятную изобретательность, которую веб-дизайнеры / разработчики проявили при создании сложных сайтов, макеты, Поплавки CSS никогда не предназначались для такого использования.
Хотя float и CSS-позиционирование наверняка найдутся в веб-дизайне на долгие годы, более новый макет методы, включая CSS Grid и Flexbox, теперь предоставляют веб-дизайнерам новые способы создания макетов своих сайтов. Еще одна новая техника макета, которая демонстрирует большой потенциал, - это CSS Multiple Columns.
Столбцы CSS существуют уже несколько лет, но отсутствие поддержки в старых браузерах (в основном старых версии Internet Explorer) не позволяют многим веб-профессионалам использовать эти стили в своей работе. Работа.
После прекращения поддержки этих старых версий IE некоторые веб-дизайнеры теперь экспериментируют с новым макетом CSS. параметры, включая столбцы CSS, и обнаружив, что они имеют гораздо больший контроль с этими новыми подходами, чем с плавает.
Основы столбцов CSS
Как следует из названия, CSS Multiple Columns (также известный как CSS3 макет с несколькими столбцами) позволяет разделить контент на заданное количество столбцов. Самые основные свойства CSS, которые вы бы использовали:
- счетчик столбцов
- колонна-пробел
Для подсчета столбцов вы указываете необходимое количество столбцов. Зазор столбца будет промежутком между этими столбцами. Браузер примет эти значения и равномерно разделит содержимое на указанное вами количество столбцов.
Типичным примером использования нескольких столбцов в CSS на практике может быть разделение блока текстового содержимого на несколько столбцов, как в газетной статье. Допустим, у вас есть следующая разметка HTML (обратите внимание, что для примера мы поместили только начало один абзац, хотя на практике, вероятно, в этой разметке будет несколько абзацев):
Заголовок вашей статьи.
Представьте себе здесь много абзацев текста ...
Если вы затем написали эти стили CSS:
.содержание {
-moz-column-count: 3;
-webkit-column-count: 3;
количество столбцов: 3;
-moz-column-gap: 30 пикселей;
-webkit-столбец-пробел: 30 пикселей;
столбец-пробел: 30 пикселей;
}
Это правило CSS разделит раздел «контент» на 3 равных столбца с промежутком в 30 пикселей между ними. Если вам нужны два столбца вместо 3, вы просто измените это значение, и браузер вычислит новую ширину этих столбцов, чтобы равномерно разделить содержимое. Обратите внимание, что мы сначала используем свойства с префиксом поставщика, а затем объявления без префикса.
Как бы просто это ни было, его использование таким образом сомнительно для использования веб-сайта. Да, вы можете разделить кучу контента на несколько столбцов, но это может быть не лучшее чтение опыт работы в Интернете, особенно если высота этих столбцов ниже "сгиба" экран.
Читатели должны будут прокручивать вверх и вниз, чтобы прочитать весь контент. Тем не менее, принцип CSS Columns так же прост, как вы видите здесь, и его можно использовать не только для разделения содержимого некоторых абзацев, но и для разметки.
Макет со столбцами CSS
Предположим, у вас есть веб-страница с областью содержимого, состоящей из 3 столбцов содержимого. Это очень распространенный макет веб-сайта, и для получения этих трех столбцов вы обычно размещаете разделы, которые находятся в. С несколькими столбцами CSS это намного проще.
Вот пример HTML:
Из нашего блога.
Контент будет идти сюда…
Предстоящие События.
Контент будет идти сюда…
CSS для создания этих нескольких столбцов начинается с того, что вы видели ранее:
.содержание {
-moz-column-count: 3;
-webkit-column-count: 3;
количество столбцов: 3;
-moz-column-gap: 30 пикселей;
-webkit-столбец-пробел: 30 пикселей;
столбец-пробел: 30 пикселей;
}
Теперь проблема заключается в том, что браузер хочет разделить этот контент равномерно, поэтому, если длина контента этих разделов отличается, этот браузер фактически разделит контент отдельного деления, добавляя начало в один столбец, а затем продолжая в другой (вы можете увидеть это, используя этот код для запуска эксперимента и добавления разной длины содержимого внутри каждого разделение).
Это не то, что вам нужно. Вы хотите, чтобы каждый из этих разделов создавал отдельный столбец, и, независимо от того, насколько большим или маленьким может быть содержание отдельного подразделения, вы никогда не захотите его разделять. Вы можете добиться этого, добавив еще одну строку CSS:
.content div {
дисплей: встроенный блок;
}
Это заставит те подразделения, которые находятся внутри «содержимого», оставаться нетронутыми, даже если браузер разбивает его на несколько столбцов. Более того, поскольку мы не указали здесь фиксированную ширину, эти столбцы будут автоматически изменять размер по мере изменения размера браузера, что делает их идеальным приложением для отзывчивые веб-сайты. При использовании этого стиля «встроенный блок» каждый из трех ваших разделов будет отдельным столбцом контента.
Использование ширины столбца
Помимо «счетчика столбцов» есть еще одно свойство, которое вы можете использовать, и, в зависимости от ваших потребностей в макете, оно может быть лучшим выбором для вашего сайта. Это «ширина столбца». Используя ту же разметку HTML, которая была показана ранее, мы могли бы сделать это с помощью нашего CSS:
.содержание {
-moz-ширина-столбца: 500 пикселей;
-webkit-ширина-столбца: 500 пикселей;
ширина столбца: 500 пикселей;
-moz-column-gap: 30 пикселей;
-webkit-столбец-пробел: 30 пикселей;
столбец-пробел: 30 пикселей;
}
.content div {
дисплей: встроенный блок;
}
Это работает так, что браузер использует эту «ширину столбца» как максимальное значение этого столбца. Таким образом, если ширина окна браузера меньше 500 пикселей, эти 3 раздела появятся в одном столбце, один поверх другого. Это типичный макет, используемый для макетов мобильных / небольших экранов.
По мере увеличения ширины браузера до достаточного размера, чтобы вместить 2 столбца вместе с указанными промежутками между столбцами, браузер автоматически перейдет от макета с одним столбцом к макету с двумя столбцами. Продолжайте увеличивать ширину экрана, и в конечном итоге вы получите дизайн из трех столбцов, в котором каждый из трех разделов будет отображаться в отдельном столбце. Опять же, это отличный способ повысить отзывчивость, дружелюбный к нескольким устройствам макеты, и вам даже не нужно использовать медиа-запросы изменить стили макета!
Другие свойства столбца
В дополнение к свойствам, описанным здесь, существуют также свойства для «правила столбца», включая значения цвета, стиля и ширины, которые позволяют создавать правила между столбцами. Они будут использоваться вместо границ, если вы хотите, чтобы несколько строк разделяли ваши столбцы.
Время экспериментировать
В настоящее время очень хорошо поддерживается CSS Multiple Column Layout. С префиксами более 94% веб-пользователей смогут видеть эти стили, и эта неподдерживаемая группа на самом деле будет просто гораздо более старыми версиями Internet Explorer, которые больше не поддерживаются.
Имея такой уровень поддержки, нет причин не начинать экспериментировать со столбцами CSS и развертывать эти стили на готовых к работе веб-сайтах. Вы можете начать свои эксперименты, используя HTML и CSS, представленные в этой статье, и поэкспериментировать с различными значениями, чтобы увидеть, что лучше всего подходит для макета вашего сайта.