Как создать список из 3-х столбцов?

Question

Я должен производить список, состоящий из 3-столбца элементов, подобные тем, что можно увидеть для различных групп (в основном банки и финансовые учреждения) на этой странице:

http://funds.ft.com/FundDirectory.aspx (даже если они расположены горизонтально выровненных дивы)

У меня есть все элементы, которые мне нужно добавить в 3 столбца в List<Group>, хранящиеся в моем Model.Groups объекте.

Я думал о принятии подход аналогичен:

<ul> 
    <% foreach (var item in Model.Groups) { %> 

     <li> 
      <a href='<%=item.URL %>'> 
       <%= Html.Encode(item.Name) %> 
      </a> 
     </li> 

    <% } %> 
</ul> 

, но это будет только генерировать список одного столбца. Есть ли способ для меня создать список из 3-х столбцов с простым HTML/CSS или мне нужно принять более динамичный подход, например? создание 3 горизонтально выровненных списков с количеством элементов в списке в зависимости от общего количества элементов в Model.Groups/3?

Или есть более умный способ для меня подойти к этому? Я открыт для всех предложений. Благодаря

Answer 1

Это самый простой и самый эффективный ответ, который я нашел:

http://www.communitymx.com/content/article.cfm?cid=27f87

Цитирую сайт:

The HTML: 
<ul> 
    <li>Antelope</li> 
    <li>Bison</li> 
    <li>Camel</li> 
    <li>Deer</li> 
    <li>Eland</li> 
    <li>Gazelle</li> 
</ul> 

The CSS: 
ul { 
    float: left; 
    width: 12em; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 

li { 
    float: left; 
    width: 6em; 
    margin: 0; 
    padding: 0; 
} 

«Если мы хотим, чтобы больше столбцов, мы можем расширить перечислите и добавьте больше элементов списка "

Answer 2

Это ответили около часа назад здесь: How do I overflow the contents of a column into the next column using CSS?

Answer 3

Если подмигнули неупорядоченный список, вы можете просто плавать слева li «s и дать им ширину 33%.

Answer 4

CSS3 column стили могут быть использованы в списке, а также:

<ul class="group-list"> 
    ... 
</ul> 

.group-list { 
    -moz-column-gap: 20; 
    -moz-column-count: 3; 
    -webkit-column-count: 3; 
    -webkit-column-gap: 20; 
    column-count: 3; 
    column-gap: 20; 
} 

Вы можете добавить Modernizr и это jQuery column plugin для поддержки старых версий IE:

if (!Modernizr.csscolumns) { 
     $('.group-list').makeacolumnlists({cols: 3, colWidth: 240, equalHeight: false, startN: 1}); 
} 

ППК имеет хорошую статью о CSS3 column support в браузерах, и caniuse.com has a page on CSS3 Multiple column layout тоже.