在列中堆叠div [英] Stack divs in columns

问题描述

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

I have the following markup which I can't change. I can only add <div>s to the wrapping container.

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

It is possible to stack <div>s like in the following picture?

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

推荐答案

个性定位

如果您只需要为这六列创建此布局，可以单独放置它们，因为您有 id ，只需放置所有< div> ＃ id选择器。

Individual positioning

If you need to create this layout only for this six columns than you could just position them individually, because you have id's you could just position all <div>'s with the # id selector.

此解决方案适用于您的六列布局，但如果要扩展并添加更多列，则需要在CSS中添加其他代码，例如 .box：nth-​​child（8）{left：150px;} 。

This solution will work for your six column layout, but if you want to expand it and add more columns, then you need to add extra code to your CSS, like .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;}

提高灵活性[演示]

以 Itay ，如果您使用 transform 属性可以改进此解决方案，则可以使用此属性修改CSS ：

Improvement for flexibility [Demo]

As Itay mentioned, this solution can be improved if you use the transform property, so you could modify the CSS with this:

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

您仍然需要手动更改 top 属性。另外，如果需要，请不要忘记使用 -webkit-或 -ms-这样的供应商前缀。

You still need to change the top property manually. Also don't forget to use vendor prefixes like -webkit- or -ms- if you need them.

此解决方案还使用CSS3 nth-child（n）选择器，但是这里我们使用相对定位和技巧左边距属性。该解决方案的源代码非常紧凑/可读，并且可以扩展，因此如果在<$ c>中添加更多 box es，则不必添加更多CSS选择器。 $ c>容器，只需在您的HTML中添加新行，它就可以作为一种魅力。

This solution also uses the CSS3 nth-child(n) selector, but here we use relative positioning and a trick with the margin-left property. The source code of this solution is much compact/readable and it is expandable so you don't have to add more CSS selectors if you add more boxes to your container, just simply add a new line to your HTML and it will work as a charm.

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

但是，您仍然需要设置 margin-left 属性。如果找不到通过CSS进行动态更改的方法，则可以使用JavaScript / jQuery。

However you still need to set the margin-left property by hand. If you do not find a dynamic way to change it by CSS you can use JavaScript/jQuery.

CSS3将此作为一项新功能，因此您可以轻松创建自定义列。有关更多信息，请参见这篇文章看看 Itay的答案。

CSS3 have this as a new feature, so you can easily create custom columns. Look at this article for more, and also take a look at Itay's answer.

这篇关于在列中堆叠div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！