Упорядоченный список, который автоматически разделяется на столбцы в зависимости от высоты родительского блока

У меня есть div (в этом примере мы назовем его #container), высота которого равна 100% страницы. В #container у меня есть упорядоченный список, в котором будет 101 элемент. Я ищу чистый, эффективный метод разбиения упорядоченного списка на столбцы в зависимости от высоты #container. Как вы можете себе представить, упорядоченный список такого размера будет расширяться по вертикали намного больше, чем высота #containers. Я хочу, чтобы OL автоматически разбивался на столбцы, чтобы #container не расширялся.


html css multiple-columns html-lists
person Alix Përry    schedule 04.09.2013    source источник
comment
вы можете использовать javascript?   -  person dano    schedule 04.09.2013
comment
проверьте этот ответ на аналогичный вопрос: stackoverflow.com/questions/486349/   -  person rolfsf    schedule 04.09.2013

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете попробовать что-то вроде этого

#container {
width:100%; //or whatever width you have
height:100%;
}
ul {
padding:0;
margin:0;
list-style:none;   // gets rid of typical behavior of ul
}
li {
position:relative;
width: 200px; // some specific width, play with this value.
height: 200px;
float:left;
}

Я бы рекомендовал настроить размер элементов списка в соответствии с доступной шириной экрана с помощью директив @media и использовать проценты, а не фиксированные размеры.

Кстати: я считаю, что вы также должны использовать #container {min-height:100%;}, потому что я осмелюсь сказать, что у вас не всегда есть свободное место на одном экране.

person Slytherin    schedule 03.05.2014