个人定位
如果您只需要为这六列创建此布局,则可以单独放置它们,因为您有id
's ,您可以<div>
使用#
id 选择器定位 all 。
不可扩展的解决方案 [演示]
此解决方案适用于您的六列布局,但如果您想扩展它并添加更多列,则需要在 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;}
提高灵活性 [演示]
正如Itay所提到的,如果您使用该属性,则可以改进此解决方案transform
,因此您可以使用以下方法修改 CSS:
.box:nth-child(4) {transform: translate(100%);}
.box:nth-child(6) {transform: translate(200%);}
您仍然需要top
手动更改属性。也不要忘记使用供应商前缀,-webkit-
或者-ms-
如果你需要它们。
可扩展的解决方案 [演示]
此解决方案也使用 CSS3nth-child(n)
选择器,但这里我们使用相对定位和margin-left
属性技巧。box
这个解决方案的源代码非常紧凑/可读,并且它是可扩展的,所以如果你添加更多的 es 到你的 es 中,你不必添加更多的 CSS 选择器container
,只需简单地在你的 HTML 中添加一个新行,它就可以作为一个魅力.
.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。
CSS3 列
CSS3 将此作为一项新功能,因此您可以轻松创建自定义列。查看这篇文章了解更多,也看看Itay 的回答。