Есть ли способ разбить список на столбцы?

Ответ 1

Решение CSS: http://www.w3.org/TR/css3-multicol/

Поддержка браузера - именно то, что вы ожидаете.

Он работает "везде", кроме Internet Explorer 9 и старше: http://caniuse.com/multicolumn

ul {
    -moz-column-count: 4;
    -moz-column-gap: 20px;
    -webkit-column-count: 4;
    -webkit-column-gap: 20px;
    column-count: 4;
    column-gap: 20px;
}

Смотрите: http://jsfiddle.net/pdExf/

Если требуется поддержка IE, вам придется использовать JavaScript, например:

http://welcome.totheinter.net/columnizer-jquery-plugin/

Другим решением является возврат к нормальному float: left только для IE. Порядок будет неправильным, но по крайней мере он будет выглядеть примерно так:

Смотрите: http://jsfiddle.net/NJ4Hw/

<!--[if lt IE 10]>
<style>
li {
    width: 25%;
    float: left
}
</style>
<![endif]-->

Вы можете применить этот резерв с Modernizr, если вы уже используете его.

Ответ 2

Если вы ищете решение, которое работает в IE, вы можете поместить элементы списка влево. Однако это приведет к списку, который змеется, например:

item 1 | item 2 | item 3
item 4 | item 5

Вместо аккуратных столбцов, например:

item 1 | item 4
item 2 | 
item 3 | 

Код для этого:

ul li {
  width:10em;
  float:left;
}

Вы можете добавить нижнюю границу к li, чтобы сделать поток элементов слева направо более очевидным.

Ответ 3

Если вам нужно заранее заданное количество столбцов, вы можете использовать количество столбцов и количество столбцов, как указано выше.

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

Это не будет работать на IE9 и некоторых других старых браузерах. Вы можете проверить поддержку на я могу использовать

<style>
  ul {
    display: -ms-flexbox;           /* IE 10 */
    display: -webkit-flex;          /* Safari 6.1+. iOS 7.1+ */
    display: flex;
    -webkit-flex-flow: wrap column; /* Safari 6.1+ */
    flex-flow: wrap column;
    max-height: 150px;              /* Limit height to whatever you need */
  }
</style>

<ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
</ul>

Ответ 4

Этот ответ не обязательно масштабируется, но требует лишь незначительных корректировок по мере роста списка. Семантически это может показаться немного контр-интуитивным, поскольку это два списка, но помимо этого он будет выглядеть так, как вы хотите, в любом браузере, когда-либо создаваемом.

ul {
  float: left;
}

ul > li {
  width: 6em;
}

<!-- Column 1 -->
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
<!-- Column 2 -->
<ul>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
</ul>

Ответ 5

Я обнаружил, что (в настоящее время) Chrome (Version 52.0.2743.116 m) имеет массу причуд и проблем с css column-count относительно элементов переполнения и элементов с абсолютным позиционированием внутри элементов, особенно с некоторыми переходами измерений.

это полный беспорядок и не может быть исправлен, поэтому я попытался решить это с помощью простого javascript и создал библиотеку, которая делает это - https://github.com/yairEO/listBreaker

Демо-страница

Ответ 6

Если вы можете это поддерживать, CSS Grid, вероятно, является самым чистым способом преобразования одномерного списка в макет из двух столбцов с адаптивными интерьерами.

ul {
  max-width: 400px;
  display: grid;
  grid-template-columns: 50% 50%;
  padding-left: 0;
  border: 1px solid blue;
}

li {
  list-style: inside;
  border: 1px dashed red;
  padding: 10px;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
<ul>

Ответ 7

Первый способ для мобильных устройств - использовать CSS-столбцы, чтобы создать интерфейс для небольших экранов, а затем использовать медиа-запросы, чтобы увеличить количество столбцов на каждой из заданных точек макета.

ul {
  column-count: 2;
  column-gap: 2rem;
}
@media screen and (min-width: 768px)) {
  ul {
    column-count: 3;
    column-gap: 5rem;
  }
}

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>