Долго искал решение для вывода многоуровневого списка (дерева) в заданное число колонок. Чуть весь мозг не спалил себе просчитывая алгоритм и варианты реализации. А как оказалось в CSS это уже сделано 🙂

После чего нашел вот такой генератор http://www.debray-jerome.fr/outils/Generateur-de-multi-colonnes-en-css3.html

И вот такую интересную статью: http://www.dserg.com/column-count-2011-09-29.html

Расскажу про использование CSS multi-column layout module . Допустим у нас есть многоуровневый список.

 

 

Для основного содержимого страницы он узковат, и возникает желание выводить его в несколько колонок. Для этого используем CSS-свойства column-count: 4 и column-gap: 10px. Первое задает на сколько колонок разбить контент, второе — какой между ними зазор.

 

 

Плохо выглядит вторая колонка, потому что при переносе не учлась вложенность списков. Это решается с помощью свойства page-break-inside: avoid. Оно регулирует «разрывы страницы». В примере я запретил разрывы внутри li-элементов списка верхнего уровня.

 

 

Полный код и демо можно посмотреть здесь .

Column-count и column-gap работают как минимум в Firefox 3.6 (с префиксом -moz) и Opera 11.50.

Page-break-inside в Firefox 3.6 не работает, а в Opera 11.50 работает.

Предлагаю вам развить тему, потестировав пример в других браузерах или как-нибудь усложнив верстку списка. Демо можно форкать, ссылки оставляйте в комментариях.