Многостолбцовые списки CSS

Question

Есть ли способ сделать многократные списки с несколькими столбцами, где список может иметь элементы списка различной высоты, с использованием только допустимого CSS? Под изменяемым потоком я подразумеваю, что когда пользователь перетаскивает окно все шире или уже, число столбцов должно автоматически корректироваться, когда элементы списка имеют фиксированную ширину.

Я видел статью о A List Apart , но ни одно из их решений не отвечает всем этим (кажущимся простым) требованиям. На первый взгляд, я думаю, что предложение CCS3 для списков с несколькими столбцами также не подходит (поскольку, как представляется, вам нужно указать количество столбцов).

Если это поможет, я не вообще обеспокоен IE6 и только немного обеспокоен IE7. Моя целевая аудитория - ранние пользователи, разбирающиеся в Интернете.

Обновление: Если присмотреться к спецификации CSS3, укажите ширину столбца должен сделать это, но на самом деле я сталкиваюсь со странностями из-за переполнений и тому подобного. Кто-нибудь использует этот материал IRL?

Answer 1

Оригинальный пост

Фактически, единственная команда помогает мне (хотя она существует в -webkit- и -moz- версиях):

div.wrapper 
{
    -webkit-column-width: 10em;
    -moz-column-width: 10em;
}

Вот дополнительные правила для улучшения читабельности. Вставьте код ниже и выше в пример из статьи A List Apart (я могу вставить весь HTML, если кто-то снимает авторские права) и наслаждайтесь:

div.wrapper {       
    border: 2px solid blue;
    -webkit-column-rule: 2px solid blue;
    -moz-column-rule: 2px solid blue;
}

.wrapper ol {
    margin: 0;
}

.wrapper br {
    display: none; /* Extra BR is unnecessary there */
}

Протестировано: Safari 4 (4528,17), Fx 3,5b4 / Mac.

Обратите внимание , что при первом знакомстве со свойствами ширина столбца некоторое время назад я полностью упустил тот решающий факт, что он выполняет ребалансировку. Обнаружил его сейчас на W3C и подтвердил Surfin 'Safari .

Приложение: фиксированное количество столбцов

Как я понял из пояснения, ширина столбцов должна меняться в зависимости от ширины страницы, поэтому команды больше похожи на

div.wrapper 
{
    -webkit-column-count: 3;
    -moz-column-count: 3;
}

Приложение: вертикальная прокрутка

Теперь вы говорите, что должна быть вертикальная полоса прокрутки. Поскольку нет пользовательского интерфейса, который бы делал отдельные полосы прокрутки справа от каждого столбца, я думаю, что вы имеете в виду одну полосу прокрутки, которая бы прокручивала весь список из нескольких столбцов. Это можно сделать, обернув еще один div с

div.morewrap 
{
     height: 50%; /* whatever you need */
     overflow-y: scroll; 
}

Answer 2

Используя Многостолбцовые макеты CSS , можно указать либо количество столбцов (которое будет увеличиваться или уменьшаться при изменении размера) ИЛИ ширина столбца ( приведет к добавлению или удалению новых столбцов при изменении размера):

ul li {
    margin-left: 1em; /* needed to preserve bullets */
    column-break-inside: avoid; /* don't forget this */
}
ul {
    list-style: outside disc;
    padding-left: 0.5em;
    column-width: 150px; /* actually the minimum width */
}

http://jsfiddle.net/mblase75/XtzLF/

Answer 3

Недавно у меня возникла необходимость использовать многостолбцовые списки в проекте. Мы используем колонки CSS3 и столкнулись с несколькими небольшими проблемами. Я написал об этом здесь: http://bit.ly/css3lists

Суть в следующем:

1. Устанавливайте только количество столбцов и ширину между ними, а не ширину столбцов.
2. Если вы не хотите, чтобы содержимое разбивалось на несколько столбцов, вам нужно добавить дополнительную разметку, чтобы списки отображались правильно.

Answer 4

Я понимаю, что это старый пост, но он только что заработал на моем проекте, и решение Ильи не сработало для меня (хотя, может быть, я что-то упустил). В любом случае, проблема заключается в том, что в столбцах CSS3 (теперь это Рекомендация кандидата) переполнение хочет уйти вправо путем создания дополнительных столбцов, и если у вас есть переполнение: автоматически вы получаете горизонтальную полосу прокрутки вместо вертикальной который хотел ОП, и я тоже хотел). Я исправил это, обернув div, который содержал столбцы (с установленным -moz-column-count) внутри другого div, и установил высоту для него с помощью overflow-y: auto. Это означало, что внешний блок мог прокручиваться по вертикали, в то время как внутренний блок с колонками имел столько высоты, сколько ему нужно, и не должен переполняться горизонтально.

Я надеюсь, что помогает.

Answer 5

Не с помощью простого CSS, нет. Возможно, где-то есть реализация JavaScript, но я не знаю ни одной гибкой реализации, которую вы описываете.