如何生成一个 3 列的列表？答案

【问题标题】：How to produce a 3-column list?如何生成一个 3 列的列表？
【发布时间】：2016-11-15 17:51:50
【问题描述】：

我必须生成一个 3 列的项目列表，类似于在此页面上可以看到的不同组（主要是银行和金融机构）的项目：

http://funds.ft.com/FundDirectory.aspx（即使这些是水平对齐的 div）

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

我正在考虑采取类似于以下的方法：

<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 中的项目总数？

或者我有更聪明的方法来解决这个问题吗？我愿意接受所有建议。谢谢

【问题讨论】：

标签： html css asp.net-mvc

【解决方案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 column plugin来支持旧版本的IE：

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

PPK 在浏览器中有一篇关于CSS3 column support 的好文章，caniuse.com has a page on CSS3 Multiple column layout 也有。

【讨论】：

【解决方案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;
}

“如果我们想要更多列，我们可以扩大列表并添加更多列表项”

【讨论】：

这有一个缺点，它会将项目排序而不是向下排序，这不是大多数人阅读列式列表的方式。

【解决方案3】：

大约一个小时前在这里回答了这个问题：How do I overflow the contents of a column into the next column using CSS?

【讨论】：

我认为他们有点像。我认为您应该可以使用列表中的 CSS 属性。

【解决方案4】：

如果它是一个无序列表，您可以将li 的左侧浮动并赋予它们 33% 的宽度。

【讨论】：