Как сделать CSS колонки: примеры с текстом и изображением

Рассмотрим как сделать CSS колонки (w3.org). Пару ссылок о поддержке браузерами:
-moz- для Firefox, -webkit- для Chrome и Safari, Опера и IE10 без префиксов. Не все свойства поддерживаются, поэтому я их буду опускать. Содержание будет перетекать из одного столбца в другой, при этом высота блока будет автоматически сбалансирована.

columns: ширина количество; 

columns: column-width column-count;
Пример:
<p style="columns: 3; -moz-columns: 3; -webkit-columns: 3;">содержимое</p>

или

<p style="column-count: 3; -moz-column-count: 3; -webkit-column-count: 3;">содержимое</p>
Удобно применение @media, которое установит для разрешения экрана до 400 пикселей только одну колонку:
<style type="text/css">
.kolonka {
  columns: 3;
  -moz-columns: 3;
  -webkit-columns: 3;
}

@media (max-width: 400px) {
.kolonka {
  column-count: 1;
  -moz-column-count: 1;
  -webkit-column-count: 1;
  }
}
</style>

<p class="kolonka">содержимое</p>

Нельзя отдельно для каждого столбца задать ширину колонки (column-width), при расчёте её значения нужно учитывать наличие межколоночного интервала (column-gap), поэтому уместнее, если она будет измеряться автоматически.

Для наглядности между колонками можно указать разделитель, синтаксис которого аналогичен border css.

column-rule: толщина стиль цвет;

column-rule: column-rule-width column-rule-style column-rule-color;
<style type="text/css">
.kolonka {
  columns: 3;
  -moz-columns: 3;
  -webkit-columns: 3;
  column-rule: 1px dotted red;
  -moz-column-rule: 1px dotted red;
  -webkit-column-rule: 1px dotted red;
}
</style>

<div class="kolonka">содержимое</div>

Ширина межколоночного интервала (column-gap) по умолчанию равна normal или 1em.

<style type="text/css">
.kolonka {
  line-height: 0;
  columns: 3;
  -moz-columns: 3;
  -webkit-columns: 3;
  column-gap: 0;
  -moz-column-gap: 0;
  -webkit-column-gap: 0;
}

.kolonka img{
  width: 100% !important;
  height: auto !important;
  padding: 0px;
}
</style>

<div class="kolonka">
  <img src="URL_изо_1"/>
  .......
  <img src="URL_изо_15"/>
</div>
пёсконьмечтымишкимечеклювтигр

В качестве ещё одного образца можно посмотреть на оглавление shpargalkablog.ru, реализация которого описана на этой странице. Для таких тематик, как кулинария будет весьма кстати.

Доп. тему http://shpargalkablog.ru/2013/09/div-gleich-height.html

в f t
наверх ↑

13 комментариев:

Космо Мизраил Горыныч
Последний пример суперский %) можно на фон воткнуть какую-нибудь картинку, и вообще будет на отлично ^_^
damir-tote
В рядах случаях удобно будет это использовать =)
Russian Top Blogspot
Привет, этот пост попал в Топ каталога Russian Top Blogspot
Сергей т
Подскажите, как сделать у каждой картинки с низу текст ?
NMitra
Добавьте стиль

.kolonka div {
line-height: normal;
}

Тогда HTML будет

<div class="kolonka">
<img src="URL_изо_1"/><div>Текст_1</div>
.......
<img src="URL_изо_15"/><div>Текст_15</div>
</div>
Сергей т
Спасибо ! Все получилось
Сергей т
Еще вопрос. Не во всех браузерах корректно отображается, посмотрите пожалуста
http://elit-doors93.ru/index/11/0-16
NMitra
Свойство достаточно молодое, могут быть проблемы, особенно в Хроме. Попробуйте в одну линию html разместить без пробелов и переносов между тегами.

У вас двери одинакового размера, почему не хотите делать стандартно таблицей или float?
Сергей т
Спасибо за ответ.
Сделал float
Анонимный
а как сделать чтобы разрыв колонки в некоторых текстах не мог происходить произвольно? break-inside:avoid; -webkit-break-inside:avoid; -не помогают(
NMitra
Извините, не скажу. Мельком свойством интересовалось. Оно ещё толком не имеет поддержки.
Анонимный
Возможно, это использовать не img, а сам блок div? Спасибо
NMitra
Можно http://jsfiddle.net/NMitra/9dpb053v/
Но вариант с transform: rotate мне больше нравится http://www.slashie.org/articles/up-your-css-game-with-math/