Метод основан на свойстве display: inline-block, но у него несколько особенностей:
- У блочно-строчных элементов появляются отступы из-за пробелов между элементам, решается это установкой
white-space: nowrapу родителя. - Нужно выровнять блоки по верхний границе с помощью свойства
vertical-align: top.
<div class="textcols">
<div class="textcols-item">
Текст левой колонки
...
</div>
<div class="textcols-item">
Текст правой колонки
...
</div>
</div>.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%;
}Результат:
Второй метод основан на табличном отображении элементов. Имеет недостаток т.к. нужен контейнер эмитирующий <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>.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;
}
Результат:
Свойство float делает элемент «плавающим», но имеет тоже недостатки – требуется сброс потока свойством overflow: hidden у родителя или clearfix.
Для решения данной задачи у него есть два варианта, первый:
<div class="textcols">
<div class="textcols-left">
Текст левой колонки
...
</div>
<div class="textcols-right">
Текст правой колонки
...
</div>
</div>.textcols {
overflow: hidden;
}
.textcols-left {
float: left;
width: 48%;
background: #fff2e1;
}
.textcols-right {
margin-left: 52%;
background: #fff2e1;
}Результат:
Второй вариант:
.textcols {
overflow: hidden;
}
.textcols-left {
float: left;
width: 48%;
background: #fff2e1;
}
.textcols-right {
float: right;
width: 48%;
background: #fff2e1;
}Flexbox – способ выстраивания элементов по оси. Состоит из гибкого контейнера (flex container) и гибких элементов (flex items). Гибкие элементы могут выстраиваться в строку или столбик, а оставшееся свободное пространство распределяется между ними различными способами.
<div class="textcols">
<div class="textcols-item">
Текст левой колонки
...
</div>
<div class="textcols-item">
Текст правой колонки
...
</div>
</div>.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%;
}Результат:
Набор свойств columns позволяет вывести содержимое блока в несколько колонок, автоматически распределяя текст между ними.
column-count– число колонок.column-gap– расстояние между колонками.column-width– ширина колонок.column-rule– разделительная линия между колонками.
<div class="textcols">
Текст колонок
...
</div>.textcols {
column-width: 48%;
column-count: 2;
column-gap: 4%;
background: #fff2e1;
}
