![Колонки одинаковой высоты на CSS. Макет из трех колонок](https://i0.wp.com/ruseller.com/lessons/les1247/img_1.jpg)
Колонки одинаковой высоты на 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 для создания многоколоночного шаблона могут стать отличным инструментом. Но их применение требует тщательной проверки поддержки в различных браузерах. С их помощью можно изменить внешний вид уже имеющегося проекта без глобальных переделок структуры. В тот момент, когда я стал переходить на дивовую верстку, а произошло это почти год назад (как быстро летит время), одним из серьезных уроков, которые я должен был освоить, был простой и удобных способ верстки трехколоночного макета
страницы с использованием Хорошо, когда кто-то уже сделал подобное до тебя, не приходится заново “придумывать колесо”. Достаточно найти готовое решение, которое следует хорошенько запомнить и адаптировать под себя, если потребуется. Моим замечательным помощником по данному вопросу стал уже не однократно упоминаемый мной , на котором предлагается множество хороших макетов для верстки страниц
со всевозможными вариантами представления контента. Особенности данного макета: Реализация в этом макете трех нужных колонок достигается за счет использования плавающих блоков
(контент, левая и правая колонки) и отрицательных отступов
для левой и правой колонок. При использовании оригинального кода макета с Layout Gala в нашем “любимом” IE наблюдался следующий баг
— при быстром сужении окна браузера левая колонка съезжала к центру. Чтобы от этого избавиться, я поместил блоки контента и обоих колонок в дополнительный контейнер
с id=”container” и указал ему ширину в 100%.
Приведу здесь только ту часть CSS-кода, которая формирует 3 колонки в блочном варианте верстки (остальное будет в примере). Прошу обратить внимание, что для того, чтобы сработало CSS-свойство #container {width: 100%;} для устранения бага в IE, необходимо одновременно задействовать правила минимальной ширины
для основного блока (width: expression и min-width). #wrapper {
width: 100%;
width: expression((documentElement.clientWidth||document.body.clientWidth)<995?"1000px":"");
min-width: 1000px;
}
#container {width: 100%;}
#content {
width: 100%;
float: left;
}
#text {margin: 0 250px;}
#left {
float: left;
width: 250px;
margin-left: -100%;
}
#right {
float: left;
width: 250px;
margin-left: -250px;
} CSS3 columns
— концепция многоколоночной разметки, которая позволяет разбивать контент на колонки. Колонки могут содержать заголовки, текст, таблицы, картинки и любые другие inline -элементы. IE:
10.0 Свойство позволяет явно задать необходимое число колонок, а их ширина будет рассчитываться, исходя из ширины доступного пространства. По умолчанию браузер добавляет промежуток между колонками по горизонтали, равный 1em . Если ширина изображения больше ширины колонки, то оно будет обрезано. Если одновременно с column-count задается column-width , то значение column-count будет считаться максимальным числом колонок (столбцов). Свойство не наследуется. Синтаксис
Section {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
Свойство позволяет разбить контент на колонки без задания свойства column-count . Количество колонок будет зависеть от того, сколько колонок заданной ширины может поместиться в контейнер. Не наследуется. Синтаксис
Section {
-webkit-column-width: 100px;
-moz-column-width: 100px;
column-width: 100px;
}
Свойство управляет промежутком между колонками. Если для колонок установлена разделительная линия с помощью свойства column-rule , то эта линия будет расположена посредине промежутка, а ее ширина не изменит общую ширину. Свойство не наследуется. Синтаксис
Section {
-webkit-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px;
}
Свойство задаёт количество колонок, которое пересечет выбранный элемент. Указывается не для блока-контейнера, а для для конкретного элемента внутри, например, для заголовка. Если нужно, чтобы изображение растянулось на все колонки, задаётся img {display: block; -webkit-column-span: all; column-span: all;} . Свойство не наследуется. Синтаксис
H1 {
-webkit-column-span: all;
column-span: all;
}
Свойство создаёт внутри пустого пространства между колонками вертикальную полосу — разделительную линию. Если не задан цвет линии, то некоторые эффекты не будут отображаться. Не наследуется. Синтаксис
Section {
-webkit-column-rule-style: dotted;
-moz-column-rule-style: dotted;
column-rule-style: dotted;
}
Свойство устанавливает ширину разделительной линии. Не работает без свойства column-rule-style . Не наследуется. Синтаксис
Section {
-webkit-column-rule-style: dotted;
-moz-column-rule-style: dotted;
column-rule-style: dotted;
-webkit-column-rule-width: 10px;
-moz-column-rule-width: 10px;
column-rule-width: 10px;
}
Свойство позволяет изменить цвет разделительной линии, которая наследует цвет текста. Не наследуется. Синтаксис
Section {
-webkit-column-rule-style: dotted;
-webkit-column-rule-width: 5px;
-webkit-column-rule-color: #59ACE7;
-moz-column-rule-style: dotted;
-moz-column-rule-width: 5px;
-moz-column-rule-color: #59ACE7;
column-rule-style: dotted;
column-rule-width: 5px;
column-rule-color: #59ACE7;
}
Свойство позволяет задать в одном объявлении три свойства разделительной линии — ширину column-rule-width , стиль column-rule-style и цвет column-rule-color . Не наследуется. Синтаксис
Section {
-webkit-column-rule: 5px dotted #59ACE7;
-moz-column-rule: 5px dotted #59ACE7;
column-rule: 5px dotted #59ACE7;
}
Свойство представляет собой краткую запись свойств column-width и column-count , одновременно задает ширину и количество колонок. Не наследуется. Синтаксис
Section {
-webkit-columns: 100px 3;
-moz-columns: 100px 3;
columns: 100px 3;
}
В продолжение своего топика предлагаю вам перевод статьи с более глубоким погружением в свойство многоколоночности с простыми и наглядными примерами. Еще газетами и журналами на практике доказано, что разбитый на несколько колонок текст воспринимается намного проще. На веб-страницах до недавнего времени отобразить контент таким образом было проблемой, доходило до того, что верстальщик разделял текст на несколько 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 часть
Вывод
Используем несколько колонок
Контейнеры колонок
Интервалы и разделители колонок
Заполнение колонок и размах
Прерывание колонок
Заключение
Структура HTML-кода
CSS-таблицы
Создание многоколоночной разметки с помощью модели CSS3 columns
Поддержка браузерами
Firefox:
9.0 -moz-
Chrome:
4.0 -webkit-
Safari:
3.0 -webkit-
Opera:
11.1, 15.0 -webkit-
iOS Safari:
9, 7.1 -webkit-
Opera Mini:
8
Android Browser:
2.1 -webkit-
Chrome for Android:
44 -webkit-1. Количество колонок column-count
Рис. 1. Пример многоколоночной разметки
2. Ширина колонок column-width
3. Ширина пустого пространства между колонками column-gap
Рис. 2. Промежутки между колонками
4. Позиционирование элемента на несколько колонок column-span
Рис. 3. Позиционирование заголовка на все колонки
5. Стиль разделительной линии column-rule-style
Значения:
none
Значение по умолчанию, означает отсутствие линии. Цвет и ширина, заданные для линии, игнорируются.
hidden
Аналогично со значением none , линия скрыта.
dotted
Отображает линию набором квадратных точек.
dashed
Отображает линию как последовательность из тире.
solid
Обычная линия.
double
Отображает разделительную линию в виде двух параллельных тонких линий, расположенных на некотором расстоянии между собой. Толщина разделительной линии не указывается, но сумма линий и промежутка между ними равна значению column-rule-width .
groove
Отображает линию объемной, вдавленной в полотно. Это достигается путем создания тени из двух цветов, один из которых темнее, другой — светлее.
ridge
Отображает разделительную линию объемной, т.е. эффект, противоположный groove .
inset
Отображает сплошную линию цветом темнее, чем заданный цвет линии.
outset
Отображает сплошную линию цветом, заданным свойством column-rule-color .
initial
Устанавливает значение свойства в значение по умолчанию.
inherit
Наследует значение свойства от родительского элемента.
Рис. 4. Стиль разделительной линии
6. Ширина разделительной линии column-rule-width
Рис. 5. Ширина разделительной линии
7. Цвет разделительной линии column-rule-color
Рис. 6. Цвет разделительной линии
8. Краткая запись стилей разделительной линии column-rule
9. Установка колонок с помощью одного свойства columns
Создание контента, разбитого на несколько колонок
Используем HTML5-тег article
:Интервал между колонками
Интервал задается свойством column-gap
в px или em, и не может быть отрицательным:Разделитель колонок
Свойство column-rule
позволяет добавлять разделитель между колонками, принцип работы схож с border
.Объединение колонок
Свойство column-span
работает аналогично с colspan
в table
, объединяя нужные колонки.Итог
Благодаря CSS3 Multi Column Module можно очень просто и быстро разбивать тексты на удобочитаемые колонки. Список поддерживаемых браузеров уже достаточен, чтобы примерять мультиколоночность на рабочих проектах. Для устаревших браузеров можно применять специальную