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

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

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


<ul class="my-class">
  <li>Строка 1</li>
  <li>Строка 2</li>
  <li>Строка 3</li>
  <li>Строка 4</li>
  <li>Строка 5</li>
  <li>Строка 6</li>
  <li>Строка 7</li>
  <li>Строка 8</li>
</ul>

<style>
.my-class li {
  display:block;
  width:49%;
  float:left;
}
</style>

<li>Строка 1</li>

<li>Строка 2</li>

<li>Строка 3</li>

<li>Строка 4</li>

<li>Строка 5</li>

<li>Строка 6</li>

<li>Строка 7</li>

<li>Строка 8</li>

</ul>

<style>

.my-class li {

display:block;

width:49%;

float:left;

}

</style>

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

Пример 1

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

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


  <style>
.list {
    -moz-column-count: 3; /* Для Firefox */
    -webkit-column-count: 3; /* Для Safari и Chrome */
    column-count: 3;
}
</style>

<ul class="list">
  <li>Строка 1</li>
  <li>Строка 2</li>
  <li>Строка 3</li>
  <li>Строка 4</li>
  <li>Строка 5</li>
  <li>Строка 6</li>
  <li>Строка 7</li>
  <li>Строка 8</li>
</ul>

<style>

.list {

-moz-column-count: 3; /* Для Firefox */

-webkit-column-count: 3; /* Для Safari и Chrome */

column-count: 3;

}