Текст в три колонки

Примеры, как вывести текст в три колонки одинаковой ширины и отступом между ними с помощью разных CSS-свойств.

Элементы со свойством display: inline-block встают в одну строку, но у них появляются отступы, чтобы их убрать можно указать e родительского блока font-size: 0 или white-space: nowrap.

<div class="textcols">
	<div class="textcols-item">
		<b>Текст первой колонки</b>
		...
	</div>
	<div class="textcols-item">
		<b>Текст второй колонки</b>
		...
	</div>
	<div class="textcols-item">
		<b>Текст третей колонки</b>
		...
	</div>
</div>
HTML
.textcols {
	white-space: nowrap;
	font-size: 0;
}
.textcols-item {
	white-space: normal;	
	display: inline-block;
	width: 30%;
	vertical-align: top;
	background: #fff2e1;
	margin-right: 5%;
	font-size: 14px;
}
.textcols .textcols-item:last-child {
	margin-right: 0 ;
}
CSS

Второй метод основан на табличном отображении элементов.

<div class="textcols">
	<div class="textcols-row">
		<div class="textcols-item">
			<b>Текст первой колонки</b>
			...
		</div>
		<div class="textcols-item">
			<b>Текст второй колонки</b>
			...
		</div>
		<div class="textcols-item">
			<b>Текст третей колонки</b>
			...
		</div>
	</div>
</div>
HTML
.textcols {
	display: table;
	width: 100%;
	border-collapse: collapse;
}
.textcols-row {
	 display: table-row;
}
.textcols-item {
	display: table-cell;	
	width: 33%;
	vertical-align: top;
	padding: 0;
	background: #fff2e1;
	border-right: 30px solid #fff;
	border-left: 30px solid #fff;
}
.textcols-row .textcols-item:first-child {
	border-left: none;
}
.textcols-row .textcols-item:last-child {
	border-right: none;
}
CSS

Свойство float делает элемент «плавающим», но имеет тоже недостатки – требуется сброс потока свойством overflow: hidden у родителя или clearfix.

<div class="textcols">
	<div class="textcols-item">
		<b>Текст первой колонки</b>
		...
	</div>
	<div class="textcols-item">
		<b>Текст второй колонки</b>
		...
	</div>
	<div class="textcols-item">
		<b>Текст третей колонки</b>
		...
	</div>
</div>
HTML
.textcols {
	overflow: hidden;
}
.textcols-item {
	float: left;
	width: 30%;
	background: #fff2e1;
	margin-right: 5%;
}
.textcols .textcols-item:last-child {
	margin-right: 0;
}
CSS

Flexbox – способ выстраивания элементов по оси. Состоит из гибкого контейнера (flex container) и гибких элементов (flex items).

<div class="textcols">
	<div class="textcols-item">
		<b>Текст первой колонки</b>
		...
	</div>
	<div class="textcols-item">
		<b>Текст второй колонки</b>
		...
	</div>
	<div class="textcols-item">
		<b>Текст третей колонки</b>
		...
	</div>
</div>
HTML
.textcols {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
}
.textcols-item {
	display: flex;
	flex-direction: column;
	flex-basis: 100%;
	flex: 1;
	height: 30%;
	background: #fff2e1;
}
.textcols-item + .textcols-item {
	margin-left: 5%;
}
CSS

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

<div class="textcols">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit magna eu tempus ullamcorper. Sed porta justo sed nibh elementum condimentum. Quisque non eros sit amet elit commodo maximus eget a eros.</p>
	...
</div>
HTML
.textcols {
	column-width: 33%;
	column-count: 3;
	column-gap: 4%;
	background: #fff2e1;
}

.textcols p {
	padding: 0;
	margin: 0 0 15px 0;
}
CSS
22.12.2020
6611
Предыдущая запись Текст в две колонки
Следующая запись Select с ссылками

Комментарии

, чтобы добавить комментарий.

Другие публикации

Как скрыть лишний текст в блоке
Имеем несколько колонок с разным по длине текстом, нужно сделать их одинаковой высоты и скрыть лишнее.
19730
+1
Как преобразовать текст из textarea в параграфы HTML
Такой вопрос возникает при вставке текста из формы на сайт (отзывы, комментарии и т.д.) с форматированием элементом p.
3278
0
Преобразование строк в массив PHP
Примеры преобразования строк текста в массив по разным разделителям.
4324
+3
Одна рамка между блоками
Несколько вариантов как схлопнуть (объединить) границы у рядом стоящих блоков.
8835
+2
Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
22068
+25
Переносы строк и тег BR в PHP
В PHP за перенос текста отвечают управляющие символы r (возврат каретки) и n (перевод строки), причем в разных операционных системах (на которых работает сервер) они применяются в разных комбинациях.
11595
+1