使用CSS和DIV如何在一個大內容框旁邊堆疊兩個小內容框

Question

如何使用CSS來排列我的三個div標籤，使其看起來像這樣？一個大的內容框的相互堆疊與之間的小空間（左側）（右側）

兩個小內容框

感謝

Answer 1

使用div來包含你的兩個小上左邊並使這個div float:left;。你可能也想給這個div一個固定的寬度。然後，您可以使用margin-right:x; 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/