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

发布于 2024-07-27 01:44:31 字数 279 浏览 3 评论 0原文

我有大约一百个短文本数据项（这个数字可能会有很大差异），我想将它们放入页面中，并让浏览器将其管理到周围 div 内的三列中，并按项目向下然后横向排列，像这样：

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

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

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

原文

I have about a hundred short-text data items (this number can vary substantially) that I would like to put in a page and have the browser manage that into three columns within a surrounding div, arranged with the items going down and then across, like this:

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

Is there a way to render this out as li's (or maybe just individual lines), and have the browser automatically collate it into three equal-height columns, possibly using CSS?

Are there any browser compatibility issues?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

泪意 2024-08-03 01:44:31

没有浏览器兼容性问题：

<% 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 源 - 它使用 <表>

Without browser compatibility issues:

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

We use the modulus operator to let us know if the division is even or not... if it is not, we're not going to add an extra row for the leftover columns. For more information, see http://msdn.microsoft.com/en-us/library/0w4e0fzs.aspx

For example look at https://stackoverflow.com/users HTML source - it uses <table>

回复收藏 0 原文

自演自醉 2024-08-03 01:44:31

当然，在 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 中尝试过，都没有问题。

In the CSS world this is the only way I know to do three columns outside of a table of course.

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

Clearly you wouldn't use all those style tags, instead you'd use an actual style. Notice the 33% as the width.

I tried this in IE and FirFox and no probs on either.

回复收藏 0 原文

梦言归人 2024-08-03 01:44:31

在 Xandy 建议使用 Javascript 后，我在谷歌上搜索了 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

After Xandy suggested Javascript, I did some googling for jQuery plugins, and found this:

Newspaper Columns JQuery Plugin
http://www.webmeisterei.com/petznick/2007/05/16/newspaper-columns-jquery-plugin/

Usage:
You need a Container with Elements like

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

...and you need the Columns

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

In Javascript just call:

jQuery().npColumns();

A web page that uses the plugin
http://www.bregenzerwald-news.at/?classifieds=1

回复收藏 0 原文

风向决定发型 2024-08-03 01:44:31

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

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

Then place these into a div that has its width correctly set.

回复收藏 0 原文

微暖i 2024-08-03 01:44:31

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

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

在 javascript 中（特别是 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 列，我不会在这里介绍，但是那里有大量的教程，例如这个就是这些示例之一。

html can be (actually doesnt really matters):

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

In javascripts (example in jquery in particular), you have to wrap them with cols, so that the resulting html (after manipulation of javascript) will become:

<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 will be:

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

The code above isn't too optimised ( I am sure lots of better algorithm can do), but the idea is there, you use javascript to manipulate the html into something like the above one, by putting the first 1/3 to left column, second 1/3 to center, and the rest to right. The last job is use CSS to make them into 3 columns, which I am not going to cover here but there's tons of tutorials out there, for instance, this one is one of those examples.

回复收藏 0 原文

寻梦旅人 2024-08-03 01:44:31

你不能单独用 CSS 来做到这一点 - 尽管 @griegs 已经展示了如何做到横向然后向下。

如果你总是想要 3 列，这应该很容易，只需一些服务器端代码和 CSS - 基本上对于每个项目，你都写一些类似的内容：

<li>item</li>

然后在 count/3 和 count*2/3< /code> add:

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

You can't do this in CSS alone - though @griegs has shown how to do across then down.

If you always want 3 columns this should be easy with a little server side code and CSS - basically for each item you write something like:

<li>item</li>

Then at count/3 and count*2/3 add:

</ul><ul>

So you end up with something like:

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

回复收藏 0 原文

~没有更多了~