Web

Текст в две колонки HTML: как это сделать и какие теги использовать?

Lorem ipsum dolor

Текст в две колонки в 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%;

}

  1. Используя набор свойств «column

Допустим, у нас есть такой HTML:

<body>

<div class="text2cols">

Колонки с текстом

...

</div>

</body>

У нас будет такой CSS:

.text2cols {

column-width: 48%;  /ширина колонок

column-count: 2;  /количество колонок

column-gap: 4%;  /расстояние между колонками

background: #fff2e1; 

} 

Схожие статьи

Что такое ДНС-сервер: расшифровываем термин простыми словами
Web

Что такое ДНС-сервер: расшифровываем термин простыми словами

Web

Отправка электронной почты с помощью SMTP-сервера GMail со страницы PHP

Как правильно выбрать имя домена для своего сайта? Лучшие примеры
Web

Как правильно выбрать имя домена для своего сайта? Лучшие примеры

Web

Отображение JSON с помощью PHP