如何用css设置这个div布局的样式？

Question

我正试图在这张图片中设置四个div。

我尝试过使用float:left，但我要么把所有的div都放在Div1的右侧 或者所有这些都被困在Div1下面。我相信我需要在某个地方做clear，是吗？

NB。 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 之后移动 div4 。

在此处查看示例 - http://jsfiddle.net/Wsf53/

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

为什么你不创建一个只拥有div1 div2 e div3父亲的div？ 你试试吗？