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 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也有。{/ p>

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

大约一小时前回答：How do I overflow the contents of a column into the next column using CSS?

Answer 4

如果它是一个无序列表，你可以向左浮动li并给它们宽度为33％。

如何制作3列列表？

4 个答案: