使用CSS和DIV如何在一个大内容框旁边堆叠两个小内容框

Question

如何使用CSS来安排我的三个div标签看起来像这样？

两个小内容盒相互堆叠，大内容盒（向右）之间（左侧）有一个小空间

由于

Answer 1

使用div来包含左边的两个小部分，然后创建这个div float:left;。您可能还想为此div赋予固定宽度。然后你可以使用margin-right:x; x将你的大div放在右边，这是你必须根据情况调整的数量。

Answer 2

我通常将左侧div放在另一个div中，以保持一切整洁。你可以使用这个CSS：

#left{
    float:left;
    width: 45%;
}
#left1{
    background-color:#ff0;    
    height: 100px;
}
#left2{
    background-color:#f0f;    
    height: 100px;  
}
#right{
    background-color:#0ff;    
    width: 50%;
    height: 200px;
    float:right;
 }

这个HTML：

​<div id="left">
    <div id="left1">stuff</div>
    <div id="left2">more stuff</div>
</div>
<div id="right">even more stuff</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

查看http://jsfiddle.net/XnBe9/