Question

我有8个DIV，它们与他们持有的内容交替。

DIV 1 - Category
DIV 2 - Sub-Category
DIV 3 - Category
DIV 4 - Sub-Category
etc.

如果可能，最终目标是使类别DIV彼此水平浮动，子类别DIV位于相应的类别DIV之下。

DIV 1 DIV 3 DIV 5 DIV 7

DIV 2 DIV 4 DIV 6 DIV 8

我不允许更改当前结构，例如DIV1中的嵌套DIV2。

由于DIV的动态创建方式，我也希望远离绝对定位子类别DIV，这可能会导致宽度变化等。

本质上，我希望能够在它之前相对于DIV定位DIV。

Answer 1

这应该让你接近。如果您的组垂直定向很重要，则可能需要考虑使用多列列表。如果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>');
}

Answer 2

尝试

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/

只需使用边距即可获得您想要的效果。

将交替的非嵌套DIV相对于彼此定位

2 个答案: