Войти
Регистрация

Многоколоночный текст CSS

Многоколоночный текст CSS

Если Вы хотите на своем сайте создать многоколоночный текст, такой как в газетных статьях, то это можно сделать очень просто с помощью CSS.

Колонки могут содержать текст, таблицы, картинки и другие строковые элементы (inline).

Колонки создаются автоматически, ширина каждой колонки устанавливается автоматически браузером исходя из ширины блока, количества указанных колонок или ширины колонки, если указать отдельно ширину колонки.

Давайте разберем основные свойства CSS для создания колонок. Возьмем для примера блок с большим текстом.

<div>
Разнообразный и богатый опыт постоянный количественный рост и сфера нашей активности в значительной степени обуславливает создание существенных финансовых и административных условий. Повседневная практика показывает, что постоянный количественный рост и сфера нашей активности представляет собой интересный эксперимент проверки позиций, занимаемых участниками в отношении поставленных задач. Повседневная практика показывает, что начало повседневной работы по формированию позиции играет важную роль в формировании соответствующий условий активизации. Идейные соображения высшего порядка, а также рамки и место обучения кадров представляет собой интересный эксперимент проверки существенных финансовых и административных условий. Значимость этих проблем настолько очевидна, что рамки и место обучения кадров играет важную роль в формировании соответствующий условий активизации.
</div>

Чтобы разбить этот текст на колонки используем для блока свойство column-count и в значении указываем количество колонок:

div {
  column-count: 3;
}

Текст разбился на 3 равные колонки:

Разнообразный и богатый опыт постоянный количественный рост и сфера нашей активности в значительной степени обуславливает создание существенных финансовых и административных условий. Повседневная практика показывает, что постоянный количественный рост и сфера нашей активности представляет собой интересный эксперимент проверки позиций, занимаемых участниками в отношении поставленных задач. Повседневная практика показывает, что начало повседневной работы по формированию позиции играет важную роль в формировании соответствующий условий активизации. Идейные соображения высшего порядка, а также рамки и место обучения кадров представляет собой интересный эксперимент проверки существенных финансовых и административных условий. Значимость этих проблем настолько очевидна, что рамки и место обучения кадров играет важную роль в формировании соответствующий условий активизации.

Также вместо column-count можно использовать свойство column-width, которое задает ширину колонок. В этом случае свойство column-count перестает действовать, браузер сам разобьет текст на количество колонок исходя из ширины блока и ширины колонки. Этот способ адаптивен под размеры экрана:

div {
  column-width: 120px;
}

Указав ширину колонки 120px текст разделился на несколько колонок шириной в 120px, которые поместились в блок:

Разнообразный и богатый опыт постоянный количественный рост и сфера нашей активности в значительной степени обуславливает создание существенных финансовых и административных условий. Повседневная практика показывает, что постоянный количественный рост и сфера нашей активности представляет собой интересный эксперимент проверки позиций, занимаемых участниками в отношении поставленных задач. Повседневная практика показывает, что начало повседневной работы по формированию позиции играет важную роль в формировании соответствующий условий активизации. Идейные соображения высшего порядка, а также рамки и место обучения кадров представляет собой интересный эксперимент проверки существенных финансовых и административных условий. Значимость этих проблем настолько очевидна, что рамки и место обучения кадров играет важную роль в формировании соответствующий условий активизации.

С помощью свойства column-gap можно задать ширину отступа между колонками в пикселях, em и других единицах измерения

Также между отступами можно установить вертикальную линию с помощью свойства column-rule в качестве значения необходимо указать тип линии, ее толщину и цвет:

div {
  column-gap: 15px;
  column-rule: 2px solid red;
}

Выше написанный код выведет такой результат:

Разнообразный и богатый опыт постоянный количественный рост и сфера нашей активности в значительной степени обуславливает создание существенных финансовых и административных условий. Повседневная практика показывает, что постоянный количественный рост и сфера нашей активности представляет собой интересный эксперимент проверки позиций, занимаемых участниками в отношении поставленных задач. Повседневная практика показывает, что начало повседневной работы по формированию позиции играет важную роль в формировании соответствующий условий активизации. Идейные соображения высшего порядка, а также рамки и место обучения кадров представляет собой интересный эксперимент проверки существенных финансовых и административных условий. Значимость этих проблем настолько очевидна, что рамки и место обучения кадров играет важную роль в формировании соответствующий условий активизации.

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

С уважением, Самвел Погосов

Рекомендую к изучению мой бесплатный видеокурс по HTML и CSS для начинающих с подробными видеоуроками и заданиями: Перейти к видеокурсу

Комментарии к статье

Бесплатный видеокурс

HTML и CSS для начинающих

Практический и бесплатный курс по основам HTML и CSS для начинающих. С этим курсом Вы сможете изучить базовые понятия верстки и стилей CSS. Курс с практическими уроками и заданиями, все видеоуроки последовательны и увлекательны. Я научу Вас всему, чему научился сам.

Получить курс
Опрос

Для чего Вы изучаете HTML и CSS?