Несколько колонок CSS

Задача:

Как разделить текст на несколько колонок при помощи CSS?

Чтобы разделить текст или список элементов на несколько колонок, воспользуемся CSS свойством column-count


Решение:
Контейнер workarea с тремя параграфами:
<div class="workarea">
 	<p>Aenean commodo ligula eget dolor. Sed fringilla mauris sit amet nibh. Nullam accumsan lorem in dui. Etiam rhoncus. Nullam accumsan lorem in dui.</p>
 	
 	<p>Fusce risus nisl, viverra et, tempor et, pretium in, sapien. Nullam sagittis. Aenean massa. Quisque id odio. Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor.</p>
 	
 	<p>Proin faucibus arcu quis ante. Vestibulum rutrum, mi nec elementum vehicula, eros quam gravida nisl, id fringilla neque ante vel mi. Etiam sit amet orci eget eros faucibus tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Etiam iaculis nunc ac metus.</p>
</div>
Кроссбраузерное правило column-count с указанием трёх колонок:
.workarea {
	-moz-column-count: 3; /* Для Firefox */
	-webkit-column-count: 3; /* Для Safari и Chrome */
	column-count: 3;
}
Изменено: 25 08 2016
Просмотров: 2415