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

Question

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

原文post: 我正在尝试将一个 2 行布局放在一起，将其自身放入列中。像这样：

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

可以是 DIV 或 LI，没关系。但重要的是，这些项目要放在彼此下面，而不是像这样排成一排：

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

此外，它应该适用于任意数量的列，这就是我遇到的问题。如果有帮助，这些项目是 WordPress posts，我可以将其包装在 UL 或 DIV 中。但是如果我让它像下面显示的那样在简单的 HTML 中工作，我可以继续使用它。建议？

有一个 Fiddle 在这里工作：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

来点简单的怎么样？

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

Answer 2

找到解决办法。可能需要一些微调，但它可以工作。对于可能正在寻找类似内容的人：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;
}

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

Content in two rows, and any number of columns

html

css

multiple-columns