Текст в столбцах — CSS3 — несколько столбцов

Я покажу интересный способ расположить текст на странице в автономном режиме, например, в несколько столбцов.

Благодаря этому решению на странице будет больше места, и это выглядит красиво, нет необходимости писать отдельные стили div, текст автоматически упорядочится для нас.

В html-код мы помещаем:

<h2>Column count</h2>
<p class="multi-column1">Pellentesque quis tortor vitae elit cursus vulputate et vel dui. Nunc commodo pretium arcu in ultricies. Nunc vel velit enim, et tincidunt leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque eget tempor sapien. Cras convallis tempor orci pulvinar scelerisque. Nullam et erat eu nibh sollicitudin congue sit amet id diam. Sed in lectus ut augue euismod porta. Quisque non lacus odio. Nunc ornare adipiscing egestas.
</p>

<br>

<h2>Column width</h2>
<p class="multi-column2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempus, felis at varius eleifend, neque orci porta magna, consequat aliquam ligula velit quis erat. Aenean porttitor pellentesque risus, eu tincidunt ipsum blandit in. Sed lobortis placerat elit tincidunt tempor. Nam dignissim euismod quam nec tempor. Sed tortor lorem, ultricies a auctor nec, auctor ut neque. Aenean varius, urna eget adipiscing feugiat, nunc ligula molestie massa, id accumsan turpis metus ac ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>

<br>

<h2>Column rules</h2>
<p class="multi-column2-bordered">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempus, felis at varius eleifend, neque orci porta magna, consequat aliquam ligula velit quis erat. Aenean porttitor pellentesque risus, eu tincidunt ipsum blandit in. Sed lobortis placerat elit tincidunt tempor. Nam dignissim euismod quam nec tempor. Sed tortor lorem, ultricies a auctor nec, auctor ut neque. Aenean varius, urna eget adipiscing feugiat, nunc ligula molestie massa, id accumsan turpis metus ac ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>

Это выглядит так:

Есть 3 варианта на выбор:

• количество столбцов (в стилях css мы ставим число с количеством столбцов, в данном случае 3)
• ширина столбца (в css мы указываем ширину столбца по 200 пикселей здесь)
• column rules (ширина 200 пикселей и столбцы, разделенные линией)

Но для того, чтобы это сработало, вам все равно нужно добавиь стиль css:

.multi-column1{
		  -moz-column-count: 3;
		  -webkit-column-count: 3;
		  -moz-column-gap: 30px;
		  -webkit-column-gap: 30px;
		  text-align: justify;
}
		
.multi-column2{
		  -moz-column-width: 200px;
		  -webkit-column-width: 200px;
		  -moz-column-gap: 30px;
		  -webkit-column-gap: 30px;
		  text-align: justify;
}	

.multi-column2-bordered{
		  -moz-column-width: 200px;
		  -webkit-column-width: 200px;
		  -moz-column-gap: 30px;
		  -webkit-column-gap: 30px;		  
		  -moz-column-rule: 2px solid #9c9c9c;
                  -webkit-column-rule: 2px solid #9c9c9c;  		  
		  text-align: justify;
}

Готово