CSS: как сделать пятую колонну колонку

Возможность вёрстки HTML-текста в несколько колонок появилась только в CSS3, которого на самом деле ещё не существует. Просто разработчики браузеров бегут впереди паровоза :)

Соответственно, в IE8 и многих других устаревших и не очень браузерах код не произведёт эффекта. А вот в IE11 и регулярно обновляющемся "Хроме" всё сработало.

Вот пример пятиколоночного стиля с комментариями:

<style>
 .columns {
  column-width: 180px; /*рекомендуемая ширина колонок*/
   -webkit-column-width: 180px; /*то же для Chrome и Safari*/
   -moz-column-width: 180px;    /*то же для Firefox*/
  column-count: 5;     /*рекомендуемое число колонок*/
   -webkit-column-count: 5;
   -moz-column-count: 5;
  column-gap: 18px;    /*расстояние между колонками*/
   -webkit-column-gap: 18px;
   -moz-column-gap: 18px;
  column-rule: 1px solid #cccccc; /*стиль разделительной линии между колонками*/
   -webkit-column-rule: 1px solid #cccccc;
   -moz-column-rule: 1px solid #cccccc;
 }
 @media (max-width: 300px) { /*для экрана шириной до 300 пикселов - только 1 колонка*/
  .columns {
   column-count: 1;
    -moz-column-count: 1;
    -webkit-column-count: 1;
   }
 }
 .columns h6 { /*для принудительного разрыва колонки тегом <h6>*/
  break-after: column;
  column-break-after: column;
  -webkit-column-break-after: always;
 }
</style>

^{-- style tag is here --}

Пример вёрстки с использованием колонок:

<div class="columns">
<p>Текст в несколько колонок давно уже применяется в издательском деле при вёрстке газет, журналов и книг. 
Человеку комфортнее читать текст определённой ширины, колонки как раз и обеспечивают разбиение большого текста на
 столбцы заданного размера. На сайтах это не всегда имеет смысл делать из-за ограниченности высоты окна браузера. 
<p>Читателю вначале придётся прокрутить одну колонку вниз до конца, а затем вернуться наверх к началу следующей 
колонки, что довольно неудобно. Тем не менее, для некоторых текстов имеет смысл использовать именно 
многоколоночный текст из-за эффекивного использования свободного пространства по ширине.
<p>Этот текст, возможно, будет разбит на 5 колонок. Свойство column-count задаёт не точное количество колонок, а 
скорее желаемое. Браузер постарается разбить текст именно на столько колонок, но при уменьшении размеров окна 
будет сокращать число колонок, чтобы сохранить комфортность чтения. Аналогично обстоит и с шириной. Свойство 
column-width указывает минимальную ширину колонки, при этом браузер это значение может проигнорировать, если 
размер окна недостаточен для обеспечения заданной ширины колонок.
</div>

В показанном выше стиле редко используемый тег заголовка 6 уровня <h6>...</h6> зарезервирован для принудительного разрыва колонки.

Разметка с принудительными разрывами выполняется браузерами неохотно. Сейчас в вашем браузере это выглядит так:

<div class="columns">
1 колонна современного общества, это чайновники, опора нации
<h6></h6>
2 колонна, это "силовики", разные полиционеры, гэбульники и прочие охранники, 
которых скоро будет больше, чем охраняемых
<h6></h6>
3 колонна, к ней относится <s>воровской</s> трудовой бизнес-элемент
<h6></h6>
4 колонна, это трудолюбивые мигранты, которыми мы заселим эту страну вместо ненужных 
нам русских и прочих татар
<h6></h6>Пятая колонна, это сильно умные, которые строем не ходят и ещё чего-то воняют 
на мудрую политику Нашего Перзидента, бей их, антилегентов проклятых
</div>

Некоторые браузеры, как новый Firefox, с "принуждением" могут и не согласиться, отобразив столько колонок, сколько влезло по ширине экрана.

21.10.2014, 18:08 [10798 просмотров]