如何使用css设置此div布局的样式？

我正在尝试将四个div设置为如图所示的样式

我尝试过使用

float:left

，但我要么把所有div都放在Div1的右侧 或者他们都被困在1号舱下面。我想我需要在某个地方做一个

清除
，对吗

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

已更新

谢谢你迄今为止的回答，它们几乎是我所需要的。要补充一个问题，当DivContainer没有固定的宽度时，是否有可能获得这种外观？
为什么不创建一个只有div1 div2 e div3之父的div？
你试过吗？
给你：

#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; }

现场演示：


更新：

#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; }

现场演示：

注：4个DIV的宽度以百分比定义。重要的是不要在这些DIV上定义边距、填充或边框，因为那样会弄乱百分比。如果需要填充和边框，请在子元素上定义它们

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

这应该是你想要的
你能改变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;}

例如：
浮动是使用动态高度内容最快、最灵活的方式。你必须对文件顺序有一些自由。意思是在div1之后移动div4

请参见此处的示例-
谢谢！。。。是否可以在不固定包裹宽度的情况下进行此操作？ie-在你扩展窗口宽度之前看起来还可以。那很近，但是我需要第4部分“粘”到第1部分的右边？如果给容器一个固定的宽度，这可能吗？是的，我可以改变div的顺序，如果这有区别的话。有关下面答案中给出的浮动技术的更多解释，请参阅。有关更多经过测试的两列和三列布局（这里基本上是两列中的两列），请参阅。