css - 如何按指定布局div？

Question

请帮我创建如下图所示的布局。

我试图实现它，但我对 CSS 的了解还不够，必须尽快完成布局...我尝试使用 CSS 属性，如 float 、溢出、position:absolute、相对等，但结果令人失望- div 相互溢出，定位不正确等等。每个 div 包含很多内容 - 其他 div、图像、列表等。

期望的结果:

Answer 1

<div style="float: left; width: 100px; height: 200px; background: #f00;">content...</div>
<div style="float: right; width: 200px; height: 300px; background: #0f0;">content...</div>

<div style="clear: both;"></div>

<div style="float: right; width: 100px; height: 300px; background: #00f;">content...</div>

<div style="clear: both;"></div>

<div style="float: right; width: 500px; height: 200px; background: #ff0;">content...</div>

<div style="clear: both;"></div>

<div style="width: 100%; height: 100px; background: #000;">content...</div>