0

I have 8 DIVs that alternate with respect to the content they hold.

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

The end goal, if possible, is to have the Category DIVs floating horizontally beside each other and the Sub-Category DIVs positioned below their corresponding Category DIV.

DIV 1 DIV 3 DIV 5 DIV 7

DIV 2 DIV 4 DIV 6 DIV 8

I am not allowed to change the current structure, such as nest DIV2 within DIV1.

I also want to keep away from absolutely positioning the Sub-Category DIVs due to the dynamic way the DIVs are created, which could result in changing widths, etc.

In essence, I want to be able to position a DIV relative to the DIV before it.

4

2 回答 2

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>');
}
于 2013-10-15T14:45:07.420 回答
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/

只需利用边距即可获得您想要的东西。

于 2013-10-15T14:49:02.710 回答