如何用CSS設計這個div佈局？

Question

我想要得到四個div如此圖像樣式。

我試着用float:left，但我要麼得到所有的div上Div1構成 右側或全部卡住Div1構成下方卡住了。我相信我需要在某個地方做一個clear，對嗎？

注意： Div2和Div3可能會有不同的高度。

更新。
謝謝你到目前爲止的答案，他們幾乎是我所需要的。爲了增加這個問題，當DivContainer沒有固定的寬度時可以看到這個樣子嗎？

Answer 1

在這裏你去：

#wrap { width:730px; overflow:auto; padding:20px; } 
#div1 { width:500px; float:left; height:200px; margin-bottom:20px; } 
#div2 { width:237px; float:left; clear:left; height:150px; margin-right:20px; } 
#div3 { width:237px; float:left; height:170px; } 
#div4 { width:200px; float:right; height:500px; } 

現場演示：http://jsfiddle.net/simevidas/MNjyg/show/

---

更新：

#wrap { overflow:auto; } 
#div1{ background:yellow; width:70%; float:left; } 
#div2{ background:red; width:35%; float:left; clear:left; } 
#div3{ background:green; width:35%; float:left; } 
#div4{ background:blue; width:30%; float:right; } 

現場演示：http://jsfiddle.net/simevidas/Cm7b7/6/

注意：4個DIV的寬度以百分比定義。不要在這些DIV上定義邊距，填充或邊界，這很重要，因爲這會混淆百分比。如果您需要填充和邊框，請在子元素上定義它們。

Answer 2

爲什麼你不創建只有div1 div2 e div3的父親的div？ 你嘗試過嗎？

Answer 3

#div1 {float:left;} 
#div2 { float:left; clear:left;} 
#div3 {float:left;} 
#div4 {float:right;} 

應該做你想做

Answer 4

你可以改變div的順序是什麼？例如，做出正確的列div2？所以你可以浮動除div 2之外的所有東西，這些東西會漂浮在右邊？

---

是的，我可以改變的div的順序，如果有差別。

然後，我會命令它們，以便第二個div是右列。然後類似於：

#div1{width: 400px; float: left;} 
#div2{width: 200px; float: right;height: 600px;} 
#div3, #div4{width: 200px; float: left;} 
#div3{background-color: green;} 

例如：http://dev.tylerc.net/divs.html

Answer 5

花車走的最快方法，並與動力高度含量最靈活的。您必須對文件訂單採取一些自由。含義div4div1。

在這裏看到一個例子 - http://jsfiddle.net/Wsf53/