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

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


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

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

1 2 3

4 5 6

7 8 9

А так:

1 4 7

2 5 8

3 6 9


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

Подскажите, пожалуйста, реализацию.
  • Вопрос задан
  • 51159 просмотров
Пригласить эксперта
Ответы на вопрос 13
Yeah
@Yeah
Еще можно придумать такое CCS3 решение:
li {
  float:left;
}
li:nth-child(3n+1) {
  clear:both;
}
Ответ написан
dudeonthehorse
@dudeonthehorse
Email Developer
Если список получается посредством массива, то не составляет труда разбить массив на 3 списка, и не нужно ничего чудить. Если статика, то просто верстаем три списка типа ul.
Ответ написан
variable
@variable
В css2 без js нереально
Ответ написан
sirponch
@sirponch
Вот вариант решения от студии Самизнаетекого: bit.ly/Cdsz8
Ответ написан
mihdan
@mihdan
WordPress-евангелист, ведущий РНР - разработчик
jQuery: Разбить список на колонки (и мой коммент обязательно).
Ответ написан
Реально в css3, но поддерживается multi-column layout только в webkit и mozilla.
Ответ написан
MTonly
@MTonly
Веб-разработчик с 2002 года
Если важна «валидность», то остаётся лишь разбить на три раздельных списка. Умный вариант — свободное использование DIV внутри UL, OL и DL — официально до сих пор не принят (хотя в браузерах работает): непосредственными потомками UL, увы, формально по-прежнему могут быть только LI.
Ответ написан
Alroniks
@Alroniks
MODX Джедай, работаю с Laravel
На днях я такое реализовал в XSLT. Там тоже намучился. В чистом HTML нужен какой-то скрипт, иначе никак. Или с сервера динамически списки формировать правильно.
Ответ написан
@Jazzist
Дано ограничение по количеству строк или столбцов?

Сделать несложно с jQuery.
Ответ написан
@Mad-cote
Попробуйте использовать flex. Вот ссылочка на использование этой замечательной вещи. Ну и сверху решение хорошее, с использованием column.

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы