• Страница 1 из 1
  • 1
Форум » Веб-разработка » Коды HTML для сайта » Создать текст в две колонки на HTML + CSS (Как правильно создается текст на 2 колонки при помощи CSS)
Создать текст в две колонки на HTML + CSS
Kosten
Дата: Понедельник, 2020-10-19, 19:57 | Сообщение 1
Оффлайн
Администраторы
Сообщений:29727
Награды: 62


Иногда нам нужно вывести текст в 2 колонки, это делается для для читабельности, где можно в одной колонке написать плюсы на заданный материал, а во второй минусы. Или просто в несколько колонок смотрится намного смотрибельно, и безусловно оригинально, так как в основе мы всегда наблюдаем одну запись. Как все можно сделать при задействование стилей, то ниже приведен вариант, что можно разместить на любом сайте или блоге, любой тематики.



HTML

Код
<div class="nulosemadag">
    <div class="vukavna-kolonka">
  <b>Текст левой колонки</b>
  <p>Описание 1</p>
  <p>Описание 1.1</p>
    </div>
    <div class="vukavna-kolonka">
  <b>Текст правой колонки</b>
  <p>Описание 2.</p>
    </div>
</div>

CSS

Код
body {
    font-size:14px;
    padding: 15px 20px;
}
.nulosemadag {
    white-space: nowrap;
}
.vukavna-kolonka {
    white-space: normal;    
    display: inline-block;
    width: 48%;
    vertical-align: top;
    background: #fff2e1;
}
.nulosemadag .vukavna-kolonka:first-child {
    margin-right: 4%;
}

Колонки идут на аналогичной высоте.

Демонстрация
Прикрепления: 1749354.png(29.1 Kb) · two-column-text.zip(3.1 Kb)
Страна: (RU)
Kosten
Дата: Понедельник, 2020-10-19, 20:01 | Сообщение 2
Оффлайн
Администраторы
Сообщений:29727
Награды: 62


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

Float

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


See the Pen
Колонки
by Kocsten (@kocsten)
on CodePen.


Страна: (RU)
Kosten
Дата: Понедельник, 2020-10-19, 20:03 | Сообщение 3
Оффлайн
Администраторы
Сообщений:29727
Награды: 62


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

Flexbox


See the Pen
2 колонки
by Kocsten (@kocsten)
on CodePen.


Страна: (RU)
Kosten
Дата: Понедельник, 2020-10-19, 20:04 | Сообщение 4
Оффлайн
Администраторы
Сообщений:29727
Награды: 62


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

column-count – число колонок.
column-gap – расстояние между колонками.
column-width – ширина колонок.
column-rule – разделительная линия между колонками.

CSS3 columns


See the Pen
CSS 3 columns
by Kocsten (@kocsten)
on CodePen.


Страна: (RU)
Форум » Веб-разработка » Коды HTML для сайта » Создать текст в две колонки на HTML + CSS (Как правильно создается текст на 2 колонки при помощи CSS)
  • Страница 1 из 1
  • 1
Поиск: