jquery - 相对于彼此定位交替的未嵌套 DIV

Question

我有 8 个 DIV，它们的内容交替变化。

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

如果可能的话，最终目标是让类别 DIV 水平 float 并排放置，子类别 DIV 位于相应类别 DIV 的下方。

分区 1 分区 3 分区 5 分区 7

分区 2 分区 4 分区 6 分区 8

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

由于创建 DIV 的动态方式，我还想避免绝对定位子类别 DIV，这可能会导致宽度变化等。

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

Answer 1

尝试

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/

只需调整边距即可获得您想要的内容。