c# - 如何在 ASP.NET MVC 中创建两列蛇形布局？

Question

我有大约一百个短文本数据项(这个数字可能会有很大差异)，我想将它们放在一个页面中，并让浏览器将其管理为周围 div 中的三列，按元素向下和向下排列然后穿过，像这样:

A    F    L
B    G    M
C    H    N
D    I    O
E    K    ...

有没有办法将其呈现为 li(或者可能只是单独的行)，并让浏览器自动将其整理成三个等高的列，可能使用 CSS？

是否存在任何浏览器兼容性问题？

Answer 1

没有浏览器兼容性问题:

<% var rows = source.Count() % 3 == 0 ? source.Count / 3 : (source.Count / 3) + 1; %>
<table>
    <% for(int i=0; i<rows; i++) { %>
    <tr>
        <td><%= source.Skip(i).FirstOrDefault() %></td>
        <td><%= source.Skip(i+rows).FirstOrDefault() %></td>
        <td><%= source.Skip(i+rows*2).FirstOrDefault() %></td>
    </tr>
    <% } %>
</table>

我们使用取模运算符让我们知道除法是否是偶数...如果不是，我们不会为剩余的列添加额外的行。有关详细信息，请参阅 http://msdn.microsoft.com/en-us/library/0w4e0fzs.aspx

例如看https://stackoverflow.com/users HTML 源 - 它使用 <table>