Колонки и содержимое

ul {
  column-count: 4;
}
li {
  -webkit-column-break-inside: avoid;
            page-break-inside: avoid; /* Makes effect only in Firefox */
                 break-inside: avoid; /* IE10+, Opera 11.1—12.1 */
}

Пример без стилей для <li>:

• • Item 1
  • Item 2
  • Item 3
  • Item 4
• • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
• • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
• • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7
  • Item 8

Пример со стилями для <li>:

• • Item 1
  • Item 2
  • Item 3
  • Item 4
• • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
• • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
• • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7
  • Item 8

Тут могла быть ваша реклама.

Comments are closed.