堆栈divs列

Question

我有以下标记，我无法更改。我只能将<div>添加到包装容器中。

<div class="container">
   <div class="box" id="box1">1</div>
   <div class="box" id="box2">2</div>
   <div class="box" id="box3">3</div>
   <div class="box" id="box4">4</div>
   <div class="box" id="box5">5</div>
   <div class="box" id="box6">6</div>
</div>

可以像下面的图片一样堆叠<div>吗？

+------+--------+--------+
|   1  |    3   |    5   |
+------+--------+--------+
|      |        |        |
|   2  |    4   |    6   |
|      |        |        |
+------+--------+--------+

Answer 1

个人定位

如果您只需要为这六列创建此布局，而不是单独定位它们，因为您有id个，您可以将所有<div>与{{1}放在一起id选择器。

不可扩展的解决方案[Demo]

此解决方案适用于您的六列布局，但如果您想扩展它并添加更多列，则需要向CSS添加额外的代码，例如#。

.box:nth-child(8) {left: 150px;}

提高灵活性[Demo]

如上所述Itay，如果您使用.container { position: relative; } .box { width: 50px; height: 50px; float: left; } .box:nth-child(2n) { position: absolute; top: 50px; } .box:nth-child(2) {left: 0px;} .box:nth-child(4) {left: 50px;} .box:nth-child(6) {left: 100px;} 属性，则可以改进此解决方案，因此您可以使用以下方法修改CSS：

transform

您仍需要手动更改.box:nth-child(4) {transform: translate(100%);} .box:nth-child(6) {transform: translate(200%);} 属性。另外，如果您需要，请不要忘记使用top或-webkit-等供应商前缀。

可扩展解决方案[Demo]

此解决方案还使用CSS3 -ms-选择器，但在这里我们使用相对定位和nth-child(n)属性的技巧。此解决方案的源代码非常紧凑/可读，并且可扩展，因此如果您向margin-left添加更多box es，则无需添加更多CSS选择器，只需添加新行即可到你的HTML，它将作为一个魅力。

container

提高灵活性[Demo]

不要忘记您也可以使用.box { width: 50px; height: 50px; float: left; position: relative; } .box:nth-child(2n) { top: 50px; margin-left: -50px; } 属性改进此解决方案：

transform

但是，您仍然需要手动设置.box:nth-child(2n) { transform: translate(0, 100%); margin-left: -50px; } 属性。如果您没有找到通过CSS更改它的动态方法，则可以使用JavaScript / jQuery。

CSS3列

CSS3将此作为一项新功能，因此您可以轻松创建自定义列。请查看this article了解更多内容，并查看Itay's answer。

Answer 2

备选方案＃1 - CSS列

最简单的解决方案是使用CSS3 columns。

jsFiddle Demo

.container { 
   -webkit-columns: 3;
      -moz-columns: 3;
           columns: 3;
}

• P.S - CSS3列包含一些browser support issues。

---

备选方案＃2 - CSS转换

使用CSS transforms仍然非常灵活，但{CSS}列{。}}。

supports more browsers

.box:nth-child(n+2) {
    position: absolute;
    left: 0;
}
.box:nth-child(2n) {
    top: 100%;
}
.box:nth-child(3), .box:nth-child(4) {
    -webkit-transform: translateX(100%);
        -ms-transform: translateX(100%);
            transform: translateX(100%);
}
.box:nth-child(5), .box:nth-child(6) {
    -webkit-transform: translateX(200%);
        -ms-transform: translateX(200%);
            transform: translateX(200%);
}

Answer 3

如果我理解正确，请尝试将box1和box2包装为一个div，然后对box3和box4执行相同操作，对box5和box6执行相同的操作，然后将float设置为包含div的内容，例如：

<div class="container">
  <div style="float:left">
    <div class="box" id="box1">1</div>
    <div class="box" id="box2">2</div>
  <div>
  <div style="float:left">
    <div class="box" id="box3">3</div>
    <div class="box" id="box4">4</div>
  </div>
  <div style="float:left">
    <div class="box" id="box5">5</div>
    <div class="box" id="box6">6</div>
  </div>
</div>