Разбивать в HTML длинный список на колонки, в зависимости от ширины страницы?

Question

[Руслан]

Возможно ли такое сделать, не навешивая сложный JS? Подскажите решение.

Answer 1

[Артур Кох]

Только по принципу:

1 2 3
4 5 6
7 8 9

Comments

[Руслан]

Этот вариант как раз и не устраивает.

Answer 2

[sainnr]

Подойдет ли такое решение: Список, разбитый на колонки?

Comments

[sainnr]

Вот такой вариант еще рассматривался.

Answer 3

[Марк]

В идеальном мире можно использовать CSS3 column-count и @media query для определения ширины страницы; в IE ничего не работает.

Answer 4

[Baileys]

Возможно я не правильно понял вопрос, но чем не подходит вариант отверстать всё на UL — LI и поставить стиль для LI float: left? Тогда при любом размере окна информация автоматом расположится в максимальное возможное количество столбцов.

Comments

[Руслан]

Вы имеете ввиду то о чем говориться в первом комментарии?

[Baileys]

Ну если там говориться именно про вёрстку на UL — LI, то да. А чем это вариант всё-таки не подходит?

[Руслан]

Список состоит из слов отсортированных по алфавиту.

[Baileys]

Хорошо. Вот и получится:
Ааааа Аббббб Аввввв
Аггггг Аддддд Аееее
…

Или так не подходит?

[Baileys]

Как вы хотите видеть вывод?

[Руслан]

Ааааа Аггггг
Аббббб Аддддд
Аввввв Аееее

[Baileys]

Тогда можно попробовать узнавать скриптом screen.width ширину экрана и сделать, например, пересчёт на колонки, потом количество колонок уже учитывать при выводе данных.

[Baileys]

Или при помощи jQuery узнать ширину конкретного элемента, в котором необходимо вывести список: width = $('#someElt').width(); и в последствии пересчитать количество столбцов для вывода.