html - 在列中堆叠 div

Question

我有以下无法更改的标记。我只能加<div> s 到包装容器。

<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>与 # 一起ID 选择器。

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

此解决方案适用于您的六列布局，但如果您想扩展它并添加更多列，则需要向您的 CSS 添加额外代码，例如 .box:nth-child(8) {left: 150px;} .

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

提高灵 active [ Demo ]

作为Itay提到，如果使用 transform 可以改进此解决方案属性，所以你可以用这个修改 CSS:

.box:nth-child(4) {transform: translate(100%);}
.box:nth-child(6) {transform: translate(200%);}

您仍然需要更改 top手动属性。也不要忘记使用供应商前缀，例如 -webkit-或 -ms-如果您需要它们。

可扩展解决方案[ Demo ]

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

.box {
   width: 50px;
   height: 50px;
   float: left;
   position: relative;
}
.box:nth-child(2n) {
   top: 50px;
   margin-left: -50px;
}

提高灵 active [ Demo ]

不要忘记，您也可以使用 transform 改进此解决方案属性:

.box:nth-child(2n) {
   transform: translate(0, 100%);
   margin-left: -50px;
}

但是您仍然需要设置 margin-left手属性(property)。如果您找不到通过 CSS 更改它的动态方式，您可以使用 JavaScript/jQuery。

CSS3 列

CSS3 将此作为一项新功能，因此您可以轻松创建自定义列。看this article有关更多信息，还可以查看 Itay's answer .