Question

六个div - 1 2 3 4 5 6 ....我希望div 2 4 6低于div 1 3 5.这可能吗？对不起，如果我的解释那么好。这有点难。谢谢。

<body>


<div class="contain">

    <div class="square">
    </div>
    <div class="rec01">
    </div>
    <div class="square">
    </div>
    <div class="rec02">
    </div>
    <div class="square">
    </div>
    <div class="rec03">
    </div>

</div>

</body>



  .contain {
    border:1px solid;
    width:639px;
    height:900px;
    background-color:;
    }

    .square {
    width:33%;
    height:50px;
    float:left;
    background-color:grey;
    }

    .rec01 {
    width:100%;
    height:50px;
    float:right;
    background-color:black;
    }

   .rec02 {
    width:100%;
    height:50px;
    float:right;
    background-color:black;
    }

    .rec03 {
    width:100%;
    height:50px;
    float:right;
    background-color:black;
    }

（添加更多细节，请不要注意这一点。）

Answer 1

DEMO

不确定这是不是你的意思。

从float移除.square并向其添加display:inline-block

.square {
    width:32%;
    height:50px;
    display:inline-block;
    background-color:grey;
}

Answer 2

难道你不能按照你想要的方式将标记中的元素洗牌吗？ You can do it with some jQuery

// not a pretty solution, but should work...
$( ".rec01" ).insertBefore( ".square:eq(0)" );
$( ".rec02" ).insertBefore( ".square:eq(1)" );
$( ".rec03" ).insertBefore( ".square:eq(2)" );

您的问题需要一张图片，其中包含您希望最终版本的外观。这个答案假设您希望元素2,4和6分别低于1,3和5。

Answer 3

答案可能是：使用网格。

<h3>Option 1</h3>
<div class="grid">
    <div>
        <div class="grid">
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </div>
        <div class="grid">
            <div>4</div>
            <div>5</div>
            <div>6</div>
        </div>
    </div>
</div>
<h3>Option 2</h3>
<div class="grid">
    <div>
        <div class="grid">
            <div>1</div>
            <div>3</div>
            <div>5</div>
        </div>
        <div class="grid">
            <div>2</div>
            <div>4</div>
            <div>6</div>
        </div>
    </div>
</div>

css和visual可在JSFiddle上找到。

Answer 4

您可以使用此js fiddle中提供的:nth child。如下：

.contain div:nth-child(odd) {
position:relative;
top:0;
}
.contain div:nth-child(even) {
position:relative;
top:220px;
}

如何强制div下面的divs

4 个答案: