html - 将 1 列变为 2

Question

我遇到了一个问题，我只给了一个里面有大约 10 个 div 的容器 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

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

score 4 · Accepted Answer

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

score 1 · Accepted Answer

将您的内部 div 设置为容器宽度的一半并浮动它们。例如

.container { width:600px;}

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

可以在这里看到一个链接：

对此的支持如此之低，我感到非常失望，因为这些属性将允许真正的“打印样式”布局，如果支持，我们不必清除：使我们的父 div 和子 div 正确对齐。我知道我在这里打开了一罐蠕虫，但这是迄今为止最好的选择。

我听到很多人询问列布局，那么为什么哦，为什么我们不能支持使用已经存在的技术......？？抱歉吐槽

4 回答 4