Многоколоночность на CSS подробнее. Колонки одинаковой высоты с помощью фонового изображения
В сегодняшней статье я хочу рассказать о новом способе создания колонок одинаковой высоты с помощью CSS. Не нужно больше использовать Javascript, чтобы высота колонок стала одинаковой для всех. Суть данного метода заключается в использовании нового свойства CSS3, которое дает нам намного больше возможностей, чем просто создание колонок одинаковой высоты. Но в этом уроке мы рассмотрим как легко можно решить эту наболевшую проблему.
Разметка страницы
HTML часть
Определим две колонки, которые в дальнейшем будем делать одинаковой высоты с помощью CSS:
| 1 2 3 4 5 6 7 8 | id = "page" > <div id = "main" > </ div > |
То есть нам необходимо сделать так, чтобы блок Определим flexbox для основного контейнера, в котором находятся два блока: Отлично! Сейчас осталось задать ширину для центрального блока с основным контентом и для сайдбара: Пояснения: Наша страница близка к завершению. Но когда блок с основным контентом сужается, то страница становится очень длинной. Поэтому при определенной ширине экрана мы можем сделать так, чтобы сайдбар уходил под блок с основным контентом и удобно просматривался на мобильных устройствах: Здесь приведен код без префиксов для того, чтобы он не занимал много места и не смотрелся громоздко. Вы можете полностью рабочий пример с помощью кнопки в начале статьи. Также нужно сказать о том, где работает данный метод. Так как это свойство достаточно новое, то и работает оно в современных браузерах Firefox, Chrome, Safari, Opera и IE 11. Из данной статьи вы узнали как сделать колонки одинаковой высоты на CSS. Но это далеко не все возможности этого CSS свойства. Свойство flex позволяет делать блоки резиновыми, выстраивать элементы автоматически в несколько столбцов или строк, занимая всю свободную область, а также многое другое. Но самое основное, и, главное, часто используемое решение при верстке страниц, мы рассмотрели в данной статье. В данном уроке мы расскажем о использовании свойств CSS3 для построения многоколночного шаблона. Так как это CSS3, использование его свойств требует предварительной тщательной проверки. Для создания нескольких колонок вы можете использовать свойства: Первое устанавливает точное количество выводимых колонок, а последнее - ширину каждой колонки. Все остальные параметры колонок будут определяться доступной шириной. Используем разметку HTML: Код CSS будет таким: Div {column-count: 3} или таким: Div {column-width: 15em}
/* Вы можете использовать также px */ Также доступна короткая запись: Div {columns: 3 20em} В короткой записи можно задавать и количество колонок и их ширину. Однако на практике, как правило, требуется только что-то одно. Определение колонок с помощью свойства column-count
больше подходит для резиновых шаблонов, так как ширина колонок будет адаптироваться при изменении ширину экрана браузера. Использование свойств column-count
или column-width приводит к созданию нового контейнера между внешним элементом и содержанием. Он называется контейнер колонок, хотя для него и нельзя изменять свойства. Колонки выравниваются в строке. Все контейнеры колонок в строке будут иметь одинаковую высоту, хотя их содержание может существенно отличаться. Если сделать какой-либо элемент плавающим в контейнере колонки, то он будет ограничен именно контейнером колонки, а не внешним контейнером. Также будет работать задание ширины элемента колонки в % - ширина будет рассчитываться от ширины контейнера колонки, а не внешнего контейнера. Имеется небольшой контроль над колонками. Мы можем задавать интервал между колонками с помощью свойства column-gap
. По умолчанию свойство column-gap
имеет значение 1em. Div {column-gap: 2em} Также можно устанавливать вертикальный разделитель с помощью свойства column-rule:
Div {column-rule: thin solid #ccc} Короткая запись может быть представлена 3 свойствами, действующими также, как и при определении рамок элементов: Интервал равен по высоте контейнеру колонок, а разделитель помещается в центр интервала. Интервал и разделитель имеют одинаковую высоту. Если колонка не имеет содержания, разделитель между ней и соседними колонками не будет выводиться. Вероятно, что вы не будете часто использовать указание заполнения колонок с помощью свойства column-fill
. Это способ указать браузеры сколько содержания нужно разместить в каждой колонке. Вы можете использовать значения auto
(автоматически, установлено по умолчанию) или balance
(сбалансировано), которое вынудить браузер попытаться заполнить колонки равномерно. На практике большой разницы между результатами использования данных значений не заметно. Размах, устанавливаемый с помощью свойства сolumn-span
, значительно более полезная настройка. Он позволяет элементу HTML растянуться на несколько колонок. На выше приведенном рисунке заголовок использует именно это свойство. H2 {column-span: all} Возможны только два значения - all
(все) или none
(ничего). Использовать 2 из 3 колонок не получится. Имеется три похожих свойства, которые можно использовать для прерыванием содержания в колонке вокруг элемента. Определения используемых значений: Смысл всех данных свойств и значений заключается в том, чтобы определённое содержание начиналось с новой колонки. Если изображение или непрерывное слово превышает ширину колонки, то оно будет обрезано в середине интервала, где размещается разделитель. Возможно ограничить колонки так, что элемент будет иметь больше колонок, чем места для вывода: Свойства CSS3 для создания многоколоночного шаблона могут стать отличным инструментом. Но их применение требует тщательной проверки поддержки в различных браузерах. С их помощью можно изменить внешний вид уже имеющегося проекта без глобальных переделок структуры. Сначала давайте просто рассмотрим несколько способов, которыми можно сделать колонки, а потом уже разберем пару примеров. С помощью плавающих блоков. Сегодня это самый популярный способ сделать колонки, хотя потихоньку его начинает теснить флексбокс. По умолчанию два блока в нормальном потоке не могут стоять на одной строке, но это поведение можно легко изменить, прописав обоим свойство float: left | right. Они начнут прижиматься к левому или правому краю. Чтобы идущий за ними блок воспринял плавающие блоки и разместился правильно, ему нужно прописать clear: both. С помощью флоатов чаще всего делают 2 или 3 колонки. Верстка сайта с плавающими блоками не очень сложна, нужно знать всего лишь некоторые нюансы их поведения. Например, если вам нужно сделать область для вывода статей, а справа – боковую колонку с меню, то плавающие блоки очень легко реализуют такое расположение. С помощью таблиц. Таблицы вообще были созданы для вывода большого количества ячеек и столбцов, поэтому сделать в них колонки проще простого. В таблице может быть хоть 20 колонок. Вся ее структура задается в html-коде, поэтому код получается достаточно громоздким. Поскольку ячейкам в таблице можно задавать любые размеры, раньше с их помощью верстали почти все сайты. Например, для реализации простейшего макета (шапка, контент, сайдбар, футер), в таблице делали три строки (строка таблицы формируется тегом tr). Каждая строка содержит две ячейки, потому что контент и сайдбар должны располагаться отдельно друг от друга. А в шапке и футере эти ячейки просто соединяли с помощью атрибута colspan у тега td, если это было необходимо. У ячеек можно легко убрать рамку, что позволяло веб-разработчикам верстать сложные по структуре шаблоны достаточно легко. С помощью флексбокса. Это современная технология, которая начала распространяться в 2014 году, хотя существовала и до этого. Ее суть заключается в следующем: создается один общий блок контейнер, в который помещаются другие блоки, которые нужно будет сделать в виде колонок, потом этому контейнеру нужно прописать display: flex. Далее обычно задается свойство flex-direction, которое определяет направление главной оси, по которой будут расположены блоки. В качестве значений можно задать: row и column. Первое значение направит блоки по горизонтали справа налево, второе – вниз. Также можно задать реверс: flex-direction: row-reverse. Блоки расположатся справа налево. Также есть набор отдельных свойств для дочерних блоков флекс-контейнера. В основном эти свойства позволяют задать размер блока и его поведение относительно других элементов. Преимущества флексбокса в том, что это гораздо более гибкий элемент. Если при блочной верстке веб-разработчикам часто приходилось высчитывать все по пикселям, выставляя правильные отступы, добавляя разнообразные хитрости в код, чтобы все не развалилось, то флекс-элементы легко выстаиваются в колонку, в ряд и вообще требуют гораздо меньшего количества математических вычислений со стороны разработчика. Тем не менее, я до сих пор не затронул самую главную тему. CSS сегодня предлагает возможность разбить текст в основном блоке без помощи плавающих блоков, таблиц или флексбоксов. То есть в html остается один обычный блок, а текст делится на колонки исключительно благодаря css. Итак, нижеперечисленные свойства применяются к блоку, в котором текст нужно разбить в несколько колонок. Column-count – свойство задает количество колонок, на которое нужно разбить текст. Рекомендуется выставлять значение от 2 до 4, в зависимости от того, как вам больше нравится. Column-width – задает количество символов текста в одной колонке. Я подчеркиваю, ширина колонки в данном случае задается не пикселами, а количеством символов. Оптимально: 30-50 символов в одной колонке. Также это свойство никак нельзя назвать кроссбраузерным, потому что вы выставляете только желаемое количество символов, но поступит ли браузер в согласии с вашими пожеланиями, это еще неизвестно. Column-gap – определяет промежуток между колонками. Можно задавать в пикселях. Column-rule – рисует линию, разделяющую колонки. Синтаксис свойства полностью повторяет свойство border. Сначала записывается толщина линии, потом ее тип, а потом цвет. Также я хотел бы упомянуть, что все эти css-свойства являются относительно новыми. Например, Internet Explorer поддерживает их только с десятой версии. Это свойства из стандарта CSS3, поэтому если вы их собираетесь применять на своем сайте, то нужно позаботиться о кроссбраузерности, иначе в старых версиях оперы и IE никаких колонок не будет. Плавающие блоки. Верстка сайта в две колонки чаще всего делается очень просто с помощью плавающих блоков. В css это реализуется примерно так: Float-block1{
float: left
}
.float-block2{
float: left
}
блок, который должен стоять ниже плавающих{
clear: left | both
} То есть нижнему блоку нужно указать это свойство обязательно, чтобы он правильно разместился. Таким образом, плавающие блоки станут в одну строку, если им хватает ширины в родительском элементе. Естественно, нужно указать также ширину, высоту и рамку у блоков, чтобы получилось как на этом скриншоте: А теперь сделаем самое интересное. Давайте добавим много случайного текста в основной блок и попробуем отображать его там в три колонки, как в газете или журнале. Для этого в код этому блоку нужно дописать такие правила. Пропустим ту часть, где я говорю, что меня зовут Рималь и то, что я увлекаюсь версткой дизайна для сайтов, а именно HTML & CSS. Также пропустим ту часть, где я рассказываю, что у меня была мечта создать идеальный шаблон с 100 % адаптацией и кроссбраузерностью. На просторах интернета я не нашел нормального объяснения о создании N-колоночных блоков сайта, всегда и везде был кривой и некрасивый код. Наша цель - сделать трехколоночный сайт, блоки которого будут: Итак, приступим. Для того, чтобы сделать горизонтальные 3 колонки, мы будем использовать свойство display: inline-block
. Да-да, свойство float уже не так актуально, но оно нам все же понадобится. Прежде чем задать им свойства, создадим 3 блока, обернув их в классы main
и inline
:
Результат: Размер окна больше 900px Размер окна меньше 900px Иногда нужно, чтобы дизайн сайта не сразу адаптировался под конкретные размеры, т.е. не исчезали какие-либо части сайта, а сохранялся весь функционал, просто с уменьшением их размера. Для того, чтобы растянуть дизайн на всю ширину экрана, достаточно удалить свойство max-width:700px
в классе main.
Чтобы дизайн полностью не уменьшался при малых размерах окна, а адаптировался, добавляем в стили @media запрос: /* Простой пример @media запроса*/
@media (max-width:600px) {
.inline div {
display:block; /* Делаем блоки “Блочными”, т.е. друг под другом */
width:100%; /* Задаем на всю ширину экрана */
height:100px;
}
}
Более подробно можно посмотреть на JS Fiddle - приветствуется любое изменение кода в лучшую его сторону. За материал выражаем благодарность нашему подписчику, В продолжение своего топика Новое в CSS3: многоколоночность, flexbox, сеточная разметка предлагаю вам перевод статьи с более глубоким погружением в свойство многоколоночности с простыми и наглядными примерами. Еще газетами и журналами на практике доказано, что разбитый на несколько колонок текст воспринимается намного проще. На веб-страницах до недавнего времени отобразить контент таким образом было проблемой, доходило до того, что верстальщик разделял текст на несколько div"ов. Но все может стать намного проще с CSS3 Multi Column Module. Разбиваем текст на две колонки: Article {
-webkit-column-count:2;
-moz-column-count:2;
column-count:2;
}
При помощи свойства column-width
можно задать колонкам необходимую ширину: Article {
-moz-column-width: 150px;
-webkit-column-width: 150px;
column-width: 150px;
}
Article {
-webkit-column-gap: 30px;
-moz-column-gap: 30px;
column-gap: 30px;
}
Article {
-moz-column-rule: 1px dotted #ccc;
-webkit-column-rule: 1px dotted #ccc;
column-rule: 1px dotted #ccc;
}
Article h1 {
-webkit-column-span: all;
column-span:all;
}
Колонки одинаковой высоты
CSS часть
Вывод
Используем несколько колонок
Контейнеры колонок
Интервалы и разделители колонок
Заполнение колонок и размах
Прерывание колонок
Заключение
Как можно сделать колонки
Разбиение текста на колонки
Примеры
Создание контента, разбитого на несколько колонок
Используем HTML5-тег article
:
Интервал между колонками
Интервал задается свойством column-gap
в px или em, и не может быть отрицательным:
Разделитель колонок
Свойство column-rule
позволяет добавлять разделитель между колонками, принцип работы схож с border
.
Объединение колонок
Свойство column-span
работает аналогично с colspan
в table
, объединяя нужные колонки.
Итог
Благодаря CSS3 Multi Column Module можно очень просто и быстро разбивать тексты на удобочитаемые колонки. Список поддерживаемых браузеров уже достаточен, чтобы примерять мультиколоночность на рабочих проектах. Для устаревших браузеров можно применять специальную
