位置交替的非嵌套DIVs
位置交替的非嵌套DIVs
提问于 2013-10-15 14:13:25
我有8个DIVs与他们所持有的内容相交替。
DIV 1 - Category
DIV 2 - Sub-Category
DIV 3 - Category
DIV 4 - Sub-Category
etc.如果可能的话，最终目标是让类别DIV水平地相互浮动，子类别DIV定位在它们相应的分类DIV之下。
DIV 3 DIV 5 DIV 7
DIV 4 DIV 6 DIV 8
我不允许更改当前结构，例如DIV1中的nest DIV1。
我还想避免绝对定位的子类别DIVs，因为动态的方式，DIVs是创建，这可能导致改变宽度，等等。
本质上，我希望能够相对于它之前的DIV来定位一个DIV。
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-10-15 14:49:02
试一试
div:nth-child(odd) {
float: left;
margin: 0 1em;
}
div:nth-child(even) {
float: left;
margin-left: -4em;
margin-top: 2em;
}http://jsfiddle.net/ke22R/
只要玩空白处就可以得到你想要的东西。
Stack Overflow用户
发布于 2013-10-15 14:45:07
这应该能让你接近。如果您的组垂直定向很重要，那么您可能需要考虑使用多列列表。如果div的高度不同，则需要添加一个额外的包装，以创建包含所需组数的行。
http://jsfiddle.net/isherwood/KhqyW/7
div.group {
width: 45%;
float: left;
}
var myDivs = $('div');
for (var i = 0; i < myDivs.length; i += 2) {
myDivs.slice(i, i + 2).wrapAll('<div class="group"></div>');
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19383457
复制相关文章
相似问题
腾讯云开发者
