Список в две колонки на CSS и HTML

Задача. Часто необходимо сделать список в две колонки. Эту задачу можно решить несколькими способами.

Решение 1. Через свойство float и display.

Код №1: Вывод списка в несколько колонок.
Пример 1

  • Строка 1
  • Строка 2
  • Строка 3
  • Строка 4
  • Строка 5
  • Строка 6
  • Строка 7
  • Строка 8

Решение 2. Для вывода списка по несколько колонок можно использовать CSS3-свойства
column-count или column-width. Первое — задет количество колонок, а второе — ширину колонки и таким образом заполняет свободное пространство. А свойство column-gap задет интервал между колонками (по-умолчанию — 1 1em). данные свойства можно применяь не только к спискам но и другим тегам.

Код №2: Вывод списка в несколько колонок с помощью свойства column-count в CSS3.
Пример 2.1 — column-count: 3

  • Строка 1
  • Строка 2
  • Строка 3
  • Строка 4
  • Строка 5
  • Строка 6
  • Строка 7
  • Строка 8
Пример 2.2 — column-width: 100px

  • Строка 1
  • Строка 2
  • Строка 3
  • Строка 4
  • Строка 5
  • Строка 6
  • Строка 7
  • Строка 8
5 1 голос
Рейтинг статьи
Подписаться
Уведомить о
guest

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии