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

Несколько примеров, как вывести текст в две колонки одинаковой ширины и отступом между ними.

Метод основан на свойстве display: inline-block, но у него несколько особенностей:

  • У блочно-строчных элементов появляются отступы из-за пробелов между элементам, решается это установкой white-space: nowrap у родителя.
  • Нужно выровнять блоки по верхний границе с помощью свойства vertical-align: top.
<div class="textcols">
	<div class="textcols-item">
		Текст левой колонки
		...
	</div>
	<div class="textcols-item">
		Текст правой колонки
		...
	</div>
</div>
HTML
.textcols {
	white-space: nowrap;
}
.textcols-item {
	white-space: normal;	
	display: inline-block;
	width: 48%;
	vertical-align: top;
	background: #fff2e1;
}
.textcols .textcols-item:first-child {
	margin-right: 4%;
}
CSS

Результат:

Второй метод основан на табличном отображении элементов. Имеет недостаток т.к. нужен контейнер эмитирующий <tr> (хотя работает и без него).

Вторая проблема с отступами между колонками – если применять свойство border-spacing, то отступы появятся не только между колонками, но и снаружи, поэтому приходится добавлять border через :first-child и :last-child.

К достоинтству метода можно отнести то, что колонки будут одинаковой высоты.

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

Результат:

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

Для решения данной задачи у него есть два варианта, первый:

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

Результат:

Второй вариант:

.textcols {
	overflow: hidden;
}
.textcols-left {
	float: left;
	width: 48%;
	background: #fff2e1;
}
.textcols-right {
	float: right;
	width: 48%;
	background: #fff2e1;
}
CSS

Flexbox – способ выстраивания элементов по оси. Состоит из гибкого контейнера (flex container) и гибких элементов (flex items). Гибкие элементы могут выстраиваться в строку или столбик, а оставшееся свободное пространство распределяется между ними различными способами.

<div class="textcols">
	<div class="textcols-item">
		Текст левой колонки
		...
	</div>
	<div class="textcols-item">
		Текст правой колонки
		...
	</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: 48%;
	background: #fff2e1;
}
.textcols-item + .textcols-item {
	margin-left: 4%;
}
CSS

Результат:

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

  • column-count – число колонок.
  • column-gap – расстояние между колонками.
  • column-width – ширина колонок.
  • column-rule – разделительная линия между колонками.
<div class="textcols">
	Текст колонок
	...
</div>
HTML
.textcols {
	column-width: 48%;
	column-count: 2;
	column-gap: 4%;
	background: #fff2e1;
}
CSS

Результат:

18.09.2020, обновлено 16.12.2020
24919
Предыдущая запись Вывод PHP-массива колонками
Следующая запись Текст в три колонки

Комментарии

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

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

Вывод списка по алфавиту
Представленные способы помогут сделать алфавитный список (указатель) разбитый на колонки, для вывода например станций метро, производителей, категорий и т.д.
5197
+1
Верстка списка с отточием
Иногда возникает необходимость сверстать список характеристик товара в две колонки или содержание статьи. Чтобы улучшить восприятие текста такие списки разделяют линиями, в данной статье представлены...
6346
+2
CSS display table
CSS-свойство display table и другие, делают вывод группы элементов подобно таблице, но с ограничением – объединения ячеек colspan и rowspan не поддерживаются.
19565
+2
Колоночные шаблоны
Отцентрованные шаблоны для десктопной версии с фиксированной шириной 960px и прижатым подвалом. Хорошо подходят для лэндингов т.к. есть возможность сделать разноцветные блоки на всю ширину окна.
4117
+2
Как скрыть лишний текст в блоке
Имеем несколько колонок с разным по длине текстом, нужно сделать их одинаковой высоты и скрыть лишнее.
21891
+1
Печать HTML страниц
Очень часто разработчики забывают про печатную версию сайта, поэтому можно встретить такой результат на бумаге...
28596
+6