CSS :: Колонки
- Создание многоколоночных элементов, css-cвойство column-count
- Оптимальная ширина колонок, css-cвойство column-width
- Сокращенное css-cвойство columns
- Расстояние между колонками, css-cвойство column-gap
- Порядок заполнения колонок, css-cвойство column-fill
- Установка разделительной линии колонок
- css-cвойство column-span
Создание многоколоночных элементов, css-cвойство column-count
Одним из приятных плюсов CSS 3 можно смело назвать поддержку многоколоночной верстки. Ведь теперь, чтобы сделать блочный элемент многоколоночным, достаточно просто использовать ненаследуемое css-свойство column-count, позволяющее задавать требуемое количество колонок, на которое должен быть разделен блочный элемент (см. пример №1).
htmlCodes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Свойство column-count</title>
<style>
p{
width: 400px;
margin: 1em;
padding: 0.7em;
border: 1px solid green;
}
.p_1{column-count: 2;}
.p_2{column-count: 3;}
</style>
</head>
<body>
<p class="p_1">
Текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
</p>
<p class="p_2">
Текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
</p>
</body>
</html>
Пример №1. Использование свойства column-count
Как видим, в качестве значения свойству следует передать положительное целое число, которое и определит количество колонок целевого блочного элемента. Кроме того, разрешается использовать ключевое слово auto. В этом случае браузер будет вычислять количество колонок автоматически, исходя из значений других свойств для многоколоночной верстки, которые мы рассмотрим ниже.
Оптимальная ширина колонок, css-cвойство column-width
Чтобы иметь возможность регулировать ширину колонок, в CSS предусмотрено свойство column-width, которое задает оптимальную ширину для колонок многоколоночного элемента. При этом количество колонок, на которое будет разделен элемент, зависит от количества колонок указанной пользователем ширины, которые смогут поместиться внутри элемента (см. пример №2). В качестве значений свойство принимает:
- auto – браузер будет устанавливать ширину колонок автоматически;
- ширина – любые доступные в CSS единицы измерения (смотреть), отрицательные значения и проценты не допускаются.
Следует отметить, если свойством column-count будет задано большее число колонок, чем их может поместиться указанной ширины в элемент, браузер произведет их сокращение до требуемого количества, проигнорировав значение свойства column-count. В тоже время, если свойством column-count будет задано меньшее число колонок, чем их может поместиться указанной ширины в элемент, браузер проигнорирует значение свойства column-width, увеличив при этом ширину колонок до заполнения доступного пространства.
htmlCodes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Свойство column-width</title>
<style>
p{
width: 400px;
margin: 1em;
padding: 0.7em;
border: 1px solid green;
}
/* Разбиваем на две колонки по 150px */
.p_1{
column-width: 150px;
}
/* Может вместиться только 2 колонки по 150px */
.p_2{
column-width: 150px;
column-count: 3;
}
/* Может вместиться 7 колонок, но задано только 3, */
/* поэтому column-width просто игнорируется */
.p_3{
column-width: 50px;
column-count: 3;
}
</style>
</head>
<body>
<p class="p_1">
Текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
</p>
<p class="p_2">
Текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
</p>
<p class="p_3">
Текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
</p>
</body>
</html>
Пример №2. Использование свойства column-width
Сокращенное css-cвойство columns
Сокращенное css-свойство columns позволяет одновременно задавать как ширину, так и количество колонок многоколоночного текста (см. пример №3). При этом значения могут быть указаны через пробел в любом порядке. Если какое-то из значений указано не будет, браузер использует для него соответствующее значение по умолчанию.
htmlCodes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Свойство columns</title>
<style>
p{
width: 400px;
margin: 2em;
padding: 0.7em;
border: 1px solid green;
}
/* Разбиваем на две колонки по 150px */
.p_1{
columns: 150px 2;
}
/* Может вместиться только 2 колонки по 150px */
.p_2{
columns: 150px 3;
}
/* Может вместиться 7 колонок, но задано только 3, */
/* поэтому column-width просто игнорируется */
.p_3{
columns: 50px 3;
}
/* Вместится 4 колонки по 80px */
.p_4{
columns: 80px;
}
/* Просто делим на 4 колонки */
.p_5{
columns: 4;
}
</style>
</head>
<body>
<p class="p_1">
Текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
</p>
<p class="p_2">
Текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
</p>
<p class="p_3">
Текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
</p>
<p class="p_4">
Текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
</p>
<p class="p_5">
Текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
</p>
</body>
</html>
Пример №3. Использование свойства columns
Расстояние между колонками, css-cвойство column-gap
Для возможности управления расстоянием между колонками в созданном многоколоночном элементе в CSS предусмотрено ненаследуемое свойство column-gap (см. пример №4), которое может принимать следующие значения:
- normal – браузер будет устанавливать интервал между колонками автоматически;
- интервал – любые доступные в CSS единицы измерения (смотреть), отрицательные значения не допускаются.
htmlCodes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Свойство column-gap</title>
<style>
p{
width: 400px;
height: 300px;
margin: 1em;
padding: 0.7em;
border: 1px solid green;
column-count: 3;
}
.p_1{column-gap: normal;}
.p_2{column-gap: 5em;}
</style>
</head>
<body>
<p class="p_1">
Текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
</p>
<p class="p_2">
Текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
</p>
</body>
</html>
Пример №4. Использование свойства column-gap
Порядок заполнения колонок, css-cвойство column-fill
По умолчанию браузер заполняет колонки последовательно одна за другой, однако такое поведение можно изменить при помощи ненаследуемого свойства column-fill (см. пример №5), которое может принимать следующие значения:
- auto – браузер заполняет колонки последовательно одна за другой;
- balance – браузер будет распределять содержимое равномерно между всеми колонками, в результате чего они будут иметь одинаковую высоту (при печати данное значение будет использовано только для последней страницы);
- balance-all – браузер будет распределять содержимое равномерно между всеми колонками, в результате чего они будут иметь одинаковую высоту (при печати данное значение будет использовано для всех страниц).
htmlCodes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Свойство column-fill</title>
<style>
p{
width: 400px;
height: 300px;
margin: 1em;
padding: 0.7em;
border: 1px solid green;
column-count: 3;
}
.p_1{column-fill: auto;}
.p_2{column-fill: balance;}
</style>
</head>
<body>
<p class="p_1">
Текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
</p>
<p class="p_2">
Текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
</p>
</body>
</html>
Пример №5. Использование свойства column-fill
Установка разделительной линии колонок
При желании колонки в мнококолоночном элементе можно разделять линией, задавая ее ширину, стиль и цвет. Делается это при помощи ненаследуемых свойств column-rule-width, column-rule-style и column-rule-color (см. пример №6). Перечислим значения, которые могут принимать данные свойства.
Значения свойства column-rule-width:
- ширина – принимаются любые единицы измерения (смотреть), используемые в CSS (проценты использовать не разрешается);
- thin – устанавливает тонкую разделительную линию;
- medium – устанавливает среднюю разделительную линию;
- thick – устанавливает толстую разделительную линию.
Значения свойства column-rule-style:
- none – разделительная линия не отображается, браузер обнуляет ее ширину;
- hidden – для колонок работает как none;
- dotted – разделительная линия будет иметь точечный вид;
- dashed – разделительная линия будет иметь пунктирный вид;
- solid – разделительная линия будет сплошной;
- double – разделительная линия будет двойной;
- groove – разделительная линия будет иметь объемный рифленый вид с эффектом вдавленности;
- ridge – разделительная линия будет иметь объемный рифленый вид с эффектом выпуклости;
- inset – разделительная линия будет иметь объемный вид с эффектом вдавленности;
- outset – разделительная линия будет иметь объемный вид с эффектом выпуклости.
Что касается свойства column-rule-color, то в качестве значения подойдет любое допустимое в CSS значение цвета.
htmlCodes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Установка разделительной линии колонок</title>
<style>
p{
width: 400px;
height: 300px;
margin: 1em;
padding: 0.7em;
border: 3px solid green;
column-count: 3;
}
.p_1{
column-rule: 3px dashed green;
}
.p_2{
column-rule-width: 3px;
column-rule-style: dashed;
column-rule-color: green;
}
</style>
</head>
<body>
<p class="p_1">
Текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
</p>
<p class="p_2">
Текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
</p>
</body>
</html>
Пример №6. Установка разделительной линии колонок
Отметим, что все параметры разделительной линии колонок можно задать через пробел при помощи одного сокращенного css-свойства column-rule (см. пример №6). Значения в нем могут быть указаны в любом порядке. Однако следует помнить, что стиль разделительной линии должен указываться обязательно, иначе линия не отобразится. В тоже время цвет и ширину можно опускать, тогда браузер использует для них соответствующие значения по умолчанию.
css-cвойство column-span
В конце хотелось бы отметить еще одно ненаследуемое css-свойство column-span (см. пример №7), которое определяет, должен ли элемент занимать ширину (пересекать) всех колонок многоколоночного родительского элемента или же располагаться только в одной из них. Это может потребоваться, например, для заголовков статей, которые должны идти по центру пересекая все колонки.
На данный момент свойство хорошо поддерживается браузером Opera, а Safari, Chrome и Аndroid поддерживают его через префикс в виде -webkit-column-span. Браузер Firefox на данный момент свойство не поддерживает.
htmlCodes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Свойство column-span</title>
<style>
article{
width: 400px;
margin: 0.7em;
padding: 0.5em;
border: 1px solid grey;
column-count: 2;
}
article h1, article h2{
text-align: center;
column-span: all;
-webkit-column-span: all;
}
article h2{
font-size: 1.3em;
}
article p{
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<article>
<h1>Заголовок 1-го уровня</h1>
<h2>Заголовок 2-го уровня</h2>
<p>
Текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
</p>
<h2>Заголовок 2-го уровня</h2>
<p>
Текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
</p>
</article>
</body>
</html>
Пример №7. Использование свойства column-span
С некоторыми другими приемами многоколоночной верстки можно также ознакомиться на соответствующей странице нашего учебного сайта №1.
Быстрый переход к другим страницам
- Оформление внешнего вида таблиц
- Оформление внешнего вида колонок
- Определение размеров элементов
- Вернуться к оглавлению учебника