Question

更新：找到解决方案。可能需要一些微调，但它的工作原理。对于那些可能正在寻找类似事物的人：http://jsfiddle.net/wvqg8ceg/

原帖： 我试图整理一个将自己置于列中的2行布局。像这样：

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

可以是DIV或LI，这并不重要。但是将这些物品放在彼此之下是至关重要的，而不仅仅是这样：

1 | 2 | 3 | 4 |
5 | 6 | 7 |

此外，它应该适用于任意数量的列，以及我遇到的情况。如果它有帮助，这些项目是WordPress帖子，我可以用UL或DIV包装。但是，如果我让它以简单的HTML工作，如下所示，我可以把它结束。建议？

这里有一个小提琴：http://jsfiddle.net/4jyok9ey/

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>

Answer 1

找到解决方案。可能需要一些微调，但它的工作原理。对于那些可能正在寻找类似事物的人：http://jsfiddle.net/wvqg8ceg/

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

Answer 2

简单的事情怎么样？

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

内容分为两行和任意数量的列

2 个答案: