css - 如何将两个 DIV 垂直堆叠在其他两个水平 DIV 旁边？

Question

例如：

DIV 1    DIV 2    DIV 3

                  DIV 4

我将如何编码最后两个 DIV？

Answer 1

尝试这个

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 2

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

演示（边框用于说明目的）

演示（无边界）

<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 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>