Элементы со свойством 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>.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 ;
}Второй метод основан на табличном отображении элементов.
<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>.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;
}Свойство 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>.textcols {
overflow: hidden;
}
.textcols-item {
float: left;
width: 30%;
background: #fff2e1;
margin-right: 5%;
}
.textcols .textcols-item:last-child {
margin-right: 0;
}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>.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%;
}Набор свойств 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>
.textcols {
column-width: 33%;
column-count: 3;
column-gap: 4%;
background: #fff2e1;
}
.textcols p {
padding: 0;
margin: 0 0 15px 0;
}
