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>

Answer 2

在CSS世界中，这是我知道在表格之外做三列的唯一方法。

<html>
    <div style="width:100px">
        <div style="float:left; width:33%;">a</div>
        <div style="float:left; width:33%;">bsdf</div>
        <div style="float:left; width:33%;">c</div>
        <div style="float:left; width:33%;">d</div>
        <div style="float:left; width:33%;">e</div>
        <div style="float:left; width:33%;">f</div>
        <div style="float:left; width:33%;">g</div>
    </div>
</html>

显然你不会使用所有这些样式标签，而是使用实际样式。注意宽度为33％。

我在IE和FirFox中试过这个，而且没有任何问题。

Answer 3

在Xandy建议Javascript之后，我做了一些google搜索jQuery插件，发现了这个：

报纸专栏JQuery插件
http://www.webmeisterei.com/petznick/2007/05/16/newspaper-columns-jquery-plugin/

<强>用法：
你需要一个像

这样的元素的容器

<div id="npContainer">
  <div class="npItem">Item1</div>
  <div class="npItem">Item2</div>
</div>

...你需要专栏

<div id="npColumn1"></div>
<div id="npColumn2"></div>
<div id="npColumn3"></div>

在Javascript中只需致电：

jQuery().npColumns();

使用插件的网页
http://www.bregenzerwald-news.at/?classifieds=1

Answer 4

<div style="float: left">A</div>
<div style="float: left">B</div>
<div style="float: left">C</div>
<div style="float: left">D</div>
<div style="float: left">...</div>

然后将它们放入正确设置宽度的div中。

Answer 5

html可以（实际上并不重要）：

<div class="3col_vert">
    <div>a</div>
    <div>b</div>
    <div>c</div>
    <div>d</div>
    ...
</div>

在javascripts（特别是jquery中的例子）中，你必须用cols包装它们，这样生成的html（在操作javascript之后）将变为：

<div class="3col_vert">
    <div class="col_left">
        <div>a</div> ...
    </div>
    <div class="col_centre">
        <div>e</div> ...
    </div>
    <div class="col_right">
        <div>g</div> ...
    </div>
</div>

jquery to mainpulate将是：

var vert_divs = $(".3col_vert div");
// Remove them from parent
$(".3col_vert").empty()
    .append("<div class='col_left'></div>") // append the wrapper cols to parent
    .append("<div class='col_center'></div>")
    .append("<div class='col_right'></div>");

// Now place them to the wrappers
var totalDivs = vert_divs.length; // count number of match divs

vert_divs.each(function(i) {
    if (i < totalDivs / 3)
        $(this).appendTo(".3col_vert div.col_left");
    else if (i<totalDivs * 2/3)
        $(this).appendTo(".3col_vert div.col_center");
    else
        $(this).appendTo(".3col_vert div.col_right");
});

上面的代码没有太优化（我相信很多更好的算法都可以做到），但是想法就在那里，你使用javascript来操作html到类似上面的那个，通过把前1/3左列，第二个1/3到中心，其余到右边。最后一项工作是使用CSS将它们分成3列，我不打算在这里介绍，但是有大量的教程，例如，this one就是其中一个例子。

Answer 6

你不能单独使用CSS - 虽然@griegs已经展示了如何做到这一点。

如果你总是想要3个列，那么使用一点服务器端代码和CSS应该很容易 - 基本上你为每个项目写了类似的东西：

<li>item</li>

然后在count/3和count*2/3添加：

</ul><ul>

所以你最终得到的结果是：

<style>
    .three-column-panel > ul { 
        float:left; width:33%; list-style-type: none; text-indent:0; }
</style>    

<div class="three-column-panel">
    <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ul>
    <ul>
        <li>d</li>
        <li>e</li>
        <li>f</li>
    </ul>
    <ul>
        <li>g</li>
        <li>h</li>
    </ul>
</div>

如何在ASP.NET MVC中创建双列蛇形布局？

6 个答案: