Question

例如：

DIV 1    DIV 2    DIV 3

                  DIV 4

我如何编码最后两个DIV？

Answer 1

您需要将元素包装在容器中，因此将前2个div包装在元素内并向左浮动，并将其他包装元素浮动到右侧。

Demo（边界用于说明目的）

Demo（无国界）

<div class="left_wrap">
    <div class="left1"></div>
    <div class="left2"></div>
</div>
<div class="right_wrap">
    <div class="right1"></div>
    <div class="right2"></div>
</div>

.left_wrap {
    border: 1px solid #f00;
    width: 400px;
    height: 300px; 
    float: left;
}

.right_wrap {
    border: 1px solid #0f0;
    width: 100px;
    height: 300px;
    float: left;
}

.left1, .left2 {
    float: left;
    width: 49%;
    border: 1px solid #000;
    height: 40px;
}

.right1, .right2 {
    border: 1px solid #000;
    height: 80px;
}

注意：不要忘记清除浮动元素

Answer 2

试试这个

<强> CSS

div{
    width:100px;
    height:100px;
    background:red;
    border:solid 1px #000;
    margin-bottom:10px;
}
.one{
    float:left;
    margin-right:10px;
}
.two{
    float:left;
    margin-right:10px;
}
.three{
    float:left;
    margin-right:10px;
}
.four{
    clear:both;
    margin-left:224px;
}

这是jsFiddle

Answer 3

您需要将它们封装在容器中。

以下是一个示例：http://jsfiddle.net/MN7Mp/11/

<div class="container">
    <div class="left">

    </div>
    <div class="left">

    </div>
    <div class="right">
    <div class="other">

    </div>
    <div  class="other">

    </div>
    </div>
</div>

如何将两个DIV垂直堆叠在另外两个水平DIV上？

3 个答案: