css - 2 つの DIV を他の 2 つの水平 DIV と並べて垂直に積み重ねるにはどうすればよいですか?

Question

例えば：

DIV 1    DIV 2    DIV 3

                  DIV 4

最後の 2 つの DIV をどのようにコーディングしますか?

Answer 1

要素をコンテナー内にラップする必要があるため、最初の 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 2

try this

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

here is the 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>