如何在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>