C# 如何在ASP.NET MVC中创建两列蛇行布局？_C#_Asp.net Mvc_Css_Layout_Rendering

C# 如何在ASP.NET MVC中创建两列蛇行布局？

c# asp.net-mvc css layout

C# 如何在ASP.NET MVC中创建两列蛇行布局？,c#,asp.net-mvc,css,layout,rendering,C#,Asp.net Mvc,Css,Layout,Rendering,我有大约一百个简短的文本数据项（这个数字可能会有很大的变化），我想把它们放在一个页面中，让浏览器在一个周围的div中把它们分成三列，并将这些项依次排列，如下所示： A F L B G M C H N D I O E K ... 有没有一种方法可以将其呈现为li的（或者可能只是单独的行），并让浏览器自动将其整理成三个等高列，可能使用CSS 是否存在任何浏览器兼容性问题？A <div style="float: left">A

我有大约一百个简短的文本数据项（这个数字可能会有很大的变化），我想把它们放在一个页面中，让浏览器在一个周围的div中把它们分成三列，并将这些项依次排列，如下所示：

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

有没有一种方法可以将其呈现为li的（或者可能只是单独的行），并让浏览器自动将其整理成三个等高列，可能使用CSS

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

A
<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>

B
C
D
...

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

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


A.
bsdf
C
D
E
F
G

显然，您不会使用所有这些样式标记，而是使用实际的样式。请注意，宽度为33%

我在IE和FirFox中尝试了这一点，在这两个方面都没有问题。

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


A.
B
C
D
...

在javascripts（特别是jquery中的示例）中，您必须用COL包装它们，以便生成的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>


A.
E
G

要维护的Jquery将是：

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");
});

var vert_divs=$（“.3col_vert div”）；
//从父级中删除它们
$（“.3col_vert”）.empty（）
.append（“”//将包装列追加到父项
.附加（“”）
.附加（“”）；
//现在把它们放在包装纸上
var totalDivs=垂直divs.length；//计算匹配div的数目
每个垂直分区（功能（i）{
如果（i否则，如果（i没有浏览器兼容性问题：
<% 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>


你不能单独用CSS来实现这一点——尽管@griegs已经展示了如何跨越然后向下
如果您总是想要3列，这应该很容易，只需一点服务器端代码和CSS-基本上对于您编写的每一项，如下所示：
<li>item</li>

<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>

所以你最终会得到这样的结果：
<li>item</li>

<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>


.三列面板>ul{
浮动：左侧；宽度：33%；列表样式类型：无；文本缩进：0；}

a
b
c


d
e
f


g
h

在Xandy建议使用Javascript之后，我在谷歌上搜索了jQuery插件，发现：
报纸专栏JQuery插件


用法：

您需要一个包含如下元素的容器
<div id="npContainer">
  <div class="npItem">Item1</div>
  <div class="npItem">Item2</div>
</div>

使用插件的网页

外部div的高度如何？它会自动管理吗？它如何知道它应该是三列？是的，应该这样做。我不记得必须设置高度。你可能会遇到的问题是内容和宽度。例如：如果你有a、b、c列，那么另一行、horndrolic、e、f列，那么你会有奇数列。所以设置每个列div的宽度。显然，在样式标记中执行此操作。：）它不知道列。请参阅上面的注释。好的。谢谢你的提示，但我需要一些更关注列的内容。我还尝试将父级的宽度设置为500px，整个内容保留为三列。嗯，不好。它有三列，但它先从左到右排序。我需要它将顶部排序为bottom first。这不就是你放置内部div的顺序吗？我很确定，而且我的css不是专家级的，你要求做的是不可能的。虽然现在肯定有人会证明我错了。如果你同意元素的放置顺序，那么这是一个很好的干净解决方案。你提到了“浏览器”。我认为纯css不可能做到这一点。但你当然可以用javascript来做。你也在寻找javascript的选项吗？当然，我对javascript持开放态度。这正是我看到这个答案时开始写的内容，只要用户熟悉jQuery，它就会工作得很好。在遇到jQuery之前，我不太编写客户端脚本，javascript编程就像是处理浏览器差异，而不是生产力。顺便说一句，如果有人熟悉其他框架或只是用javascript实现，那也没关系，因为它只是为了“帮助”而操作标记css完成了它的工作。谢谢，xandy。另请参阅下面我的新帖子。我认为如果您不反对此解决方案，它可能是最可取的。您生成的代码将比必须使用javascript在客户端处理它更高效。这真的很优雅。正确答案的候选者，尽管我确实找到了客户端解决方案我将很快发布。我喜欢在服务器端处理列高的想法。可能值得编写一个HTMLHelper扩展方法。
<div id="npColumn1"></div>
<div id="npColumn2"></div>
<div id="npColumn3"></div>

jQuery().npColumns();