Текст в две колонки в HTML можно сделать несколькими путями. И, естественно,при помощи таблицы стилей CSS.
Макет сайта в 2 колонки — это довольно распространенное явление. Использовать такой макет можно по-разному. Но обычно в одной колонке размещают какой-нибудь контент, а в другой — меню навигации, виджеты, разделы сайта и т. д. Иногда такой макет применяют для отдельных страниц, чтобы разместить на них свои статьи в 2 столбца.
Текст в две колонки в HTML
Мы приведем несколько примеров того, как сделать текст в две колонки в HTML при помощи CSS.
Свойство display: inline-block;
Допустим, у нас есть такой HTML:
<body>
<div class="text2cols">
<div class="text2cols-item">
Левая колонка с текстом
...
</div>
<div class="text2cols-item">
Правая колонка с текстом
...
</div>
</div>
</body>
Код CSS будет:
.text2cols {
white-space: nowrap;
}
.text2cols-item {
white-space: normal;
display: inline-block;
width: 48%;
vertical-align: top;
background: #fff2e1;
}
.text2cols .text2cols-item:first-child {
margin-right: 4%;
}
2 колонки HTML при помощи табличного представления
Допустим, у нас есть такой HTML:
<body>
<div class="text2cols">
<div class="text2cols-row">
<div class="text2cols-item">
Левая колонка с текстом
...
</div>
<div class="text2cols-item">
Правая колонка с текстом
...
</div>
</div>
</div>
</body>
У нас будет вот такой CSS:
.text2cols {
display: table;
width: 100%;
border-collapse: collapse;
}
.text2cols-row {
display: table-row;
}
.text2cols-item {
display: table-cell;
width: 50%;
vertical-align: top;
padding: 0;
background: #fff2e1;
}
.text2cols-row .text2cols-item:first-child {
border-right: 30px solid #fff;
}
.text2cols-row .text2cols-item:last-child {
border-left: 30px solid #fff;
}
Используем свойство «float»
Допустим, у нас есть код HTML:
<body>
<div class="text2cols">
<div class="text2cols-left">
Левая колонка с текстом
...
</div>
<div class="text2cols-right">
Правая колонка с текстом
...
</div>
</div>
</body>
У нас будет вот такой CSS:
.text2cols {
overflow: hidden;
}
.text2cols-left {
float: left;
width: 48%;
background: #fff2e1;
}
.text2cols-right {
margin-left: 52%;
background: #fff2e1;
}
Используем свойство «flexbox»
Допустим, у нас есть такой HTML:
<body>
<div class="text2cols">
<div class="text2cols-item">
Левая колонка с текстом
...
</div>
<div class="text2cols-item">
Правая колонка с текстом
...
</div>
</div>
</body>
У нас будет такой CSS:
.text2cols {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
.text2cols-item {
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
height: 48%;
background: #fff2e1;
}
.text2cols-item + .textcols-item {
margin-left: 4%;
}
Используя набор свойств «columns»
Допустим, у нас есть такой HTML:
<body>
<div class="text2cols">
Колонки с текстом
...
</div>
</body>
У нас будет такой CSS:
.text2cols {
column-width: 48%; /ширина колонок
column-count: 2; /количество колонок
column-gap: 4%; /расстояние между колонками
background: #fff2e1;
}
Web