Как сделать многоколоночный текст с помощью CSS? Или знакомимся со свойством column-count.

Количество просмотров: 455

Иногда бывает нужно сделать текст в несколько колонок, причем заморачиваться и все оборачивать в div не хочется. В данной статье мы рассмотрим как поделить текст на несколько колонок воспользовавшись всего лишь одним правилом css.

И так имеем контейнер с тремя абзацами. Код примера приведен ниже.




	<p>Какой то очень не обычный текст про замечательную компанию написанный старательными копирайтерами.</p> 
	<p>Второй абзац замечательно текста с еще более замечательным контентом.</p> 
	<p>А тут еще и маркированный список добавим</p< 
	<ul>
		<li>Первый пункт списка</li>
		<li>Второй пункт списка</li>
		<li>Третий пункт списка</li>
	</ul>


Пришло время применить к нашему блоку свойство column-count. Данное css свойство принимает в качестве параметра целое число и делит блок текста на заданное число колонок, равных по ширине.

Применим стили к нашему блоку


.article{
	column-count:3;
}

В итоге получаем прекрасный текст разбитый на 3 колонки.


Все готово, задача выполнена, но откуда не возьмись вбегает злой сеошник и начинает кричать о том, что отступы между колонками слишком малы. Люди не могут прочитать текст.

Будем спокойны, у нас есть решение.

Еще одно свойство - column-gap

Изначальная ширина промежутка между колонками по умолчанию равна 1em. Однако, ее можно изменить с помощью свойства column-gap. Единицы измерения px, em, pt и другие.

Применем новое свойство к нашему блоку.


.article{
	column-count:3;
	column-gap:40px;
}


Вот и все. Просто и красиво. Текст поделен на колонки с кастомной шириной.

© 2015-2018 Goodweb.me --- Карта сайта --- info@goodweb.me

Наверх