Верстка ul/li в несколько колонок?

Question

[Chvanikoff]

Здравствуйте!


Появилась задача — разбить большой (ок. 100 элементов) список ul/li на несколько колонок. Но задача этим не заканчивается…

Нужно сделать не так:

1 2 3

4 5 6

7 8 9

А так:

1 4 7

2 5 8

3 6 9


Гугл не выдает секретов реализации того, что мне нужно — только первый вариант…

Подскажите, пожалуйста, реализацию.

Answer 1

[Yeah]

Еще можно придумать такое CCS3 решение:

li {
  float:left;
}
li:nth-child(3n+1) {
  clear:both;
}

Comments

[Yeah]

А для IE — JS в условном комментарии

[omarr]

Это не тот вариант, который нужен

Answer 2

[Артур Кох]

Если список получается посредством массива, то не составляет труда разбить массив на 3 списка, и не нужно ничего чудить. Если статика, то просто верстаем три списка типа ul.

Answer 3

[sirponch]

Вот вариант решения от студии Самизнаетекого: bit.ly/Cdsz8

Comments

[juicy]

Автору нужно ни в этом направлении на колонки разбивать

Answer 4

[Mikhail Kobzarev]

jQuery: Разбить список на колонки (и мой коммент обязательно).

Answer 5

[anike_rich]

Вот тут есть решение Создание списка в виде блоков в несколько колонок

Comments

[Римский]

Спасибо)) Работает на 101%

[Александр Токмаков]

Виталий, сайт не доступен. Есть рабочий вариант?

Answer 6

[pomeo]

может подойдет что-то типа kenneth.kufluk.com/google/js-columns/
code.google.com/p/js-columns/
нагуглил по «jquery newspaper layout»

Answer 7

[Сергей Ермаков]

Реально в css3, но поддерживается multi-column layout только в webkit и mozilla.

Answer 8

[MT]

Если важна «валидность», то остаётся лишь разбить на три раздельных списка. Умный вариант — свободное использование DIV внутри UL, OL и DL — официально до сих пор не принят (хотя в браузерах работает): непосредственными потомками UL, увы, формально по-прежнему могут быть только LI.

Comments

[pxx]

А чем плох LI? Можно же что-то типа
ul {position: relative;}
ul li {display: block; width: 33.3%; position: absolute;}
Ну и пройтись по элементам Javascript'ом и разложить их в нужном порядке.

Answer 9

[Иван Климчук]

На днях я такое реализовал в XSLT. Там тоже намучился. В чистом HTML нужен какой-то скрипт, иначе никак. Или с сервера динамически списки формировать правильно.

Answer 10

[Jazzist]

Дано ограничение по количеству строк или столбцов?

Сделать несложно с jQuery.

Answer 11

[Mad-cote]

Попробуйте использовать flex. Вот ссылочка на использование этой замечательной вещи. Ну и сверху решение хорошее, с использованием column.

Вот вам еще ништячек, можно просмотреть, что поддерживается и какими браузерами. Достаточно прописать название свойства в поиске.

Answer 12

[Galyanoff]

Пользуюсь этим скриптом.