如何制作3列列表？

Question

我必须在此页面上生成一个3列的项目列表,类似于不同组(主要是银行和金融机构)的项目列表:

http://funds.ft.com/FundDirectory.aspx(尽管这些是水平对齐的div)

我需要将所有项目添加到List<Group>存储在我的Model.Groups对象中的3列中.

我想采取类似的方法:

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

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

    <% } %>
</ul>

但这只会生成一个单列列表.有没有办法让我用简单的HTML/CSS制作3列列表,或者我必须采取更动态的方法,例如创建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;
} 

"如果我们想要更多列,我们可以扩大列表并添加更多列表项"