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

Question

如何使用 CSS 将我的三个 div 标签排列成这样？

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

谢谢

Answer 1

使用 div 在左侧包含您的两个小并制作此 div float:left;。您可能还想给这个 div 一个固定的宽度。然后你可以把你的大 div 放在右边，使用margin-right:x;x 作为你必须根据情况调整的数量。

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/