如何使用CSS样式化这个div布局？

Question

我想要四个div的样式如下图所示。

我尝试使用float:left，但是我要么得到所有的div都卡在Div1的右侧，要么它们全部卡在Div1的下方。我相信我需要在某个地方使用clear，是这样吗？

NB. Div2和Div3的高度可能不同。

更新。
非常感谢目前为止给出的答案，它们几乎是我所需要的。补充一下问题，如果DivContainer没有固定的宽度，是否可以实现这种外观？

- gotsp

---

http://www.blueprintcss.org/ ftw - Homer6

有关下面答案中提供的浮动技术的更多解释，请参见http://css.maxdesign.com.au/floatutorial/。有关更多经过测试的两列和三列布局（您在此处实际上是两列中的两列），请参见http://css-discuss.incutio.com/wiki/Css_Layouts。 - reisio

Answer 1

Here you go:

#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上定义边距，填充或边框，因为这会破坏百分比。如果需要填充和边框，请在子元素上定义。

- Šime Vidas

---

谢谢！...不固定换行的宽度，这样做是否可能？例如http://jsfiddle.net/Cm7b7/4/ - 看起来还好，直到您扩展窗口的宽度。 - gotsp

Answer 2

浮点数是最快的方式，也是最灵活的动态高度内容。您需要在文档顺序上做一些调整，即将div4移动到div1之后。

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

- Jason McCreary

---

这很接近了，但我需要Div4“粘”在Div1的右侧？如果给容器一个固定的宽度，这是否可能？ - gotsp

Answer 3

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

这应该可以做到你想要的。

- webLacky3rdClass

Answer 4

你能改变div的顺序吗？例如，将右侧列div2放在前面？这样你就可以将所有内容向左浮动，除了div2，它会向右浮动？

---

是的，如果这样有所不同，我可以更改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

- Tyler Craft

---

是的，如果这有所不同，我可以更改div的顺序。 - gotsp

Answer 5

为什么不创建一个只有div1、div2和div3作为父元素的div呢？你试过吗？

- Cloudson