Модуль CSS Multi-column Layout — это мощный инструмент, который позволяет легко создавать многоколоночные макеты для ваших веб-страниц. Развитие адаптивного дизайна означает, что важно понимать, как использовать этот модуль.
Вы можете использовать свойства столбцов для создания гибких и динамических макетов, которые адаптируются к разным размерам экрана.
Указание номера столбца, ширины и промежутка
Чтобы создать подходящий макет с несколькими столбцами для содержимого страницы, вы должны начать с определения того, сколько столбцов вы хотите, чтобы он занимал. Одним из наиболее важных свойств модуля Multi-column является количество столбцов свойство, которое вы используете для установки количества столбцов, на которые нужно разделить содержимое.
Например:
.контейнер {
количество столбцов: 3;
}
Вы также можете указать ширину и расстояние между столбцами. Вы можете установить значение ширины столбца, используя любой из поддерживаемые единицы CSS нравиться пикс., Эм, или %.
Если ширина колонки установлен на
авто, браузер рассчитает ширину каждого столбца на основе количество столбцов свойство и доступное пространство внутри макета.Например, этот CSS объявляет 3 столбцы, каждый шириной 200 пикселей:
.контейнер {
количество столбцов: 3;
ширина колонки: 200пикс.;
}
разрыв столбца Свойство задает промежуток или пространство между столбцами в макете с несколькими столбцами. Он установит размер пустых пробелов между соседними столбцами и может принимать значение длины в пикселях, ems или любых других поддерживаемых единицах измерения.
Например:
.контейнер {
количество столбцов: 3;
разрыв столбца: 20пикс.; /* устанавливает расстояние между столбцами в 20 пикселей */
}
По умолчанию значение разрыв столбца установлен на нормальный. Ваш браузер выбирает это значение, чтобы обеспечить одинаковый интервал между столбцами в макете, оставаясь при этом визуально приятным. Это значение также может варьироваться в зависимости от браузера и может также зависеть от размера шрифта, высоты строки, свойство позициии другие свойства макета содержимого столбцов.
Убедиться, что колонки сбалансированы
Столбцы CSS пытаются заполнить все доступное пространство внутри макета. Иногда это может привести к тому, что столбцы будут иметь значительно разную высоту, из-за чего макет будет выглядеть неравномерно.
Чтобы сбалансировать столбцы, вы должны убедиться, что каждый столбец в вашем макете имеет примерно одинаковое количество контента.
Вы можете добиться этого, установив CSS заполнение столбца собственность на баланс. Затем браузер попытается распределить контент равномерно по всем столбцам, чтобы они были примерно одинаковой высоты.
заполнение столбца свойство установлено на баланс по умолчанию, но значение авто изменит это поведение. Использование автоматического распределения содержимого по столбцам в зависимости от доступного места. Это может привести к неравномерному промежутку между столбцами и неравномерной высоте столбцов. Он может даже создать макет с пустыми столбцами.
Вот пример того, как использовать заполнение столбца свойство для балансировки столбцов в макете с несколькими столбцами:
.многоколоночный макет {
количество столбцов: 3;
разрыв столбца: 20пикс.;
заполнение столбца: баланс;
}
В этом примере у нас есть многоколоночный макет с тремя столбцами и промежутком в 20 пикселей между каждым столбцом. Установив заполнение столбца собственность на баланс, мы гарантируем, что содержимое равномерно распределяется по столбцам, что приводит к сбалансированной высоте столбцов.
Важно отметить, что заполнение столбца может не работать для всех макетов и может привести к неравномерному промежутку между столбцами. В таких случаях вам может понадобиться использовать JavaScript для ручной балансировки столбцов. Не забывайте следовать лучшим практикам и использовать прогрессивное улучшение так что вы не полагаетесь на JavaScript.
Собираем все вместе
Вы можете объединить все, что вы узнали о реализации макета с помощью столбцов CSS, и использовать это для создания макета в стиле журнала.
Сначала создайте базовую структуру HTML. Используйте элемент-контейнер для переноса содержимого, затем создайте несколько дочерних элементов, которые затем можно разместить в столбцах.
HTML>
<HTML>
<голова>
<связьотн.="таблица стилей"href="CSScolumns.css" />
голова>
<тело>
Контейнерный элемент
<дивсорт="журнал-макет">Дочерние элементы
<дивсорт="статья">
<h2>Название статьиh2><п>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Сед в
magna vel lorem pharetra bibendum.п>
див><дивсорт="статья">
<h2>Название статьиh2><п>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Сед в
magna vel lorem pharetra bibendum.п>
див><дивсорт="статья">
<h2>Название статьиh2><п>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Сед в
magna vel lorem pharetra bibendum.п>
див>
див>
тело>
HTML>
Чтобы создать макет в стиле журнала с помощью модуля CSS Multi-column, объедините количество столбцов, ширина колонки, разрыв столбца, и заполнение столбца характеристики:
.magazine-layout {
количество столбцов: 3;
ширина колонки: 300пикс.;
разрыв столбца: 20пикс.;
заполнение столбца: баланс;
}
.статья {
фоновый цвет: #f8f8f8;
радиус границы: 4пикс.;
коробка-тень: 0 2пикс. 4пикс.RGBA(0, 0, 0, 0.1);
набивка: 10пикс.;
взлом: избегайте столбца;
}
Этот пример также определяет взлом собственность на .статья класса, со значением избегайте столбца. Свойство гарантирует, что каждая статья остается в одном столбце, а не разбивается на несколько столбцов. Вот как должен выглядеть макет:
Использование резервных копий для неподдерживаемых браузеров
Важно отметить, что количество столбцов свойство поддерживается не во всех браузерах. Браузеры, которые не поддерживают количество столбцов, вместо этого отобразит содержимое в одном столбце.
Чтобы предоставить резервные стили для неподдерживаемых браузеров, вы можете использовать такие запросы функций, как @поддерживает обнаружить поддержку количество столбцов свойство и предоставить альтернативные стили, когда свойство не поддерживается.
Например:
.контейнер {
/* Запасной вариант для браузеров, не поддерживающих подсчет столбцов */
ширина: 100%;
}
/* Обнаружение поддержки количества столбцов */
@поддерживает (количество столбцов:3) {
.контейнер {
количество столбцов: 3;
}
}
В этом примере мы используем @поддерживает запрос функции для обнаружения поддержки количество столбцов свойство. Если браузер поддерживает подсчет столбцов, контейнер элемент будет отображаться в трех столбцах. Если браузер не поддерживает подсчет столбцов, он будет отображать содержимое в одном столбце, используя ширина свойство.
Разбивка контента на столбцы
В целом столбцы CSS обеспечивают практичный и мощный способ создания гибких и адаптивных макетов из нескольких столбцов, которые повышают удобство использования и взаимодействие с пользователем веб-контента.
Используя вместе столбцы CSS и JavaScript, вы можете создавать еще более сложные и динамичные макеты, которые адаптируются к различным пользовательским предпочтениям и размерам устройств, делая ваш веб-контент более доступным и привлекательным для ваших пользователей.
