Html 两行和任意数量的列中的内容

更新：找到了解决方案。可能需要一些微调，但它可以工作。对于可能正在寻找类似产品的人：

原创帖子： 我正在尝试组合一个两行布局，将其自身放入列中。像这样：

1 | 3 | 5 | 7 | 2 | 4 | 6 | etc. 1 | 3 | 5 | 7 | 2 | 4 | 6 |等。 可以是div或LIs，这没关系。但重要的是，这些项目必须放在彼此下方，而不仅仅是像这样排成一行：

1 | 2 | 3 | 4 | 5 | 6 | 7 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 而且，它应该可以处理任意数量的列，这就是我被卡住的地方。如果有帮助的话，这些项目是WordPress帖子，我可以用UL或DIV包装。但如果我能让它在如下所示的简单HTML中工作，我可以继续。建议

这里有一把小提琴用来演奏：

1
2.
3.
4.
5.
6.
7.

一,
二,
三,
四,
五,
六,
七,

简单点怎么样

<div style="width:20%;float:left;"><ul> <li> 1 </li> <li> 2 </li> </div>
<div style="width:20%;float:left;"><ul> <li> 3 </li> <li> 4 </li> </div>
<div style="width:20%;float:left;"><ul> <li> 5 </li> <li> 6 </li> </div>
<div style="width:20%;float:left;"><ul> <li> 7 </li> <li> 8 </li> </div>

1
2
3
4
5
6
7
8

找到了解决方案。可能需要一些微调，但它可以工作。对于可能正在寻找类似产品的人：

---

不要认为这会影响用户在移动中创建的项目数量。应该在原始帖子中提到这一点。所以所有的LIs必须在一个UL中，或者它们都是DIV。用户如何添加项目？请将这些信息添加到问题中，因为它仍然与获得好的答案相关。这是WordPress的帖子。也许最好让他们插入一个表。你是通过css还是实际表来谈论表？取决于具体情况，但实际表有很多好的例子。当然，您的问题只显示了一个数字列表，所以无法判断在这种情况下是否合适……为了简单起见，我在这里使用了数字。它们代表了我以后可以相应格式化的内容。主要的事情是让这个简化的HTML工作起来。取得了一些进展。几乎达到了需要的位置，但遗憾的是，仅在FF上：

<div style="width:20%;float:left;"><ul> <li> 1 </li> <li> 2 </li> </div>
<div style="width:20%;float:left;"><ul> <li> 3 </li> <li> 4 </li> </div>
<div style="width:20%;float:left;"><ul> <li> 5 </li> <li> 6 </li> </div>
<div style="width:20%;float:left;"><ul> <li> 7 </li> <li> 8 </li> </div>

ul {
    width:100px;
    height:220px;
    padding:0;
    margin:0;

    -webkit-column-width:100px;
    -moz-column-width:100px;
    column-width:100px;

}
ul li {
    width:100px;
    height:100px;
    background:#ccc;
    list-style-type:none;
    padding:0;
    margin:5px 5px 10px 0;
    border:2px solid #999;
    text-align:center;
}
ul li:first-child,
ul li:nth-child(2) {
    margin-top:0;
}