将1列转换为2列

Question

我遇到了一个问题，我只给了一个容器div，里面有大约10个div。我想找到一种方法将这1列div分成2列而不添加额外的div（即不为左列或右列添加div）。我可以并且最希望找到一个CSS解决方案。

<div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

理想输出：

1      2
3      4
5      6

我试着玩弄漂浮但是效果不好。请告诉我。谢谢！

Answer 1

那样：http://jsfiddle.net/Qzj2d/？这是最简单的解决方案（不一定是最漂亮的解决方案）。

Answer 2

将内部div设置为容器宽度的一半并浮动它们。 e.g。

.container { width:600px;}

.container div {
   width:300px;
   float:left;
}

工作示例http://jsfiddle.net/k2tQG/

Answer 3

我认为display: inline-block优于float，因为元素的高度可能会有所不同。但您需要在font-size上将0设置为.container，然后在元素上重置。

jsfiddle example

Answer 4

我知道这里已经发布了更合适的解决方案，并且对我要提出的建议缺乏支持，但您可以使用新的ccs3列数和列将任何div分成任意数量的列 - 差距属性。

这里可以看到这方面的链接：

http://www.quirksmode.org/css/multicolumn.html

我很失望对此的支持是如此之低，因为这些属性将允许真正的印刷风格＆＃39;布局，如果支持，我们不必清除：两者都使我们的父div和子div正确对齐。我知道我在这里开了一罐蠕虫，但这是迄今为止最好的选择。

我听到很多人询问列布局，为什么我们为什么不能支持使用已经存在的技术？??对不起咆哮