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

Question

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

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

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 для поддержки старых версий IE:

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

В PPK есть хорошая статья о поддержке столбцов CSS3 в браузерах, а на сайте caniuse.com есть страница с CSS3.

Answer 2

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

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 3

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

Answer 4

Здесь ответили около часа назад: Как мне переполнить содержимое столбца в следующий столбец с помощью CSS?