Css 如何将两个div垂直堆叠在另外两个水平div的旁边？

例如：

DIV 1    DIV 2    DIV 3

                  DIV 4

---

如何对最后两个div进行编码？

您需要将元素包装在一个容器中，因此将前两个div包装在一个元素中并向左浮动，将另一个包装元素向右浮动

（边框用于说明）

（无国界）

.左包装{
边框：1px实心#f00；
宽度：400px；
高度：300px；
浮动：左；
}
.好的{
边框：1px实心#0f0；
宽度：100px；
高度：300px；
浮动：左；
}
.left1、.left2{
浮动：左；
宽度：49%；
边框：1px实心#000；
高度：40px；
}
.right 1、.right 2{
边框：1px实心#000；
高度：80px；
}

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

试试这个

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

---

以下是将它们封装在容器中所需的

下面是一个例子：

这是一个真正的问题——已经迭代了许多解决方案——但没有找到任何确定的答案。

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

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

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

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

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

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