浮动两个div，而其中一个包含动态文本-如何防止它停留在第一个div的右侧

Question

这是html:

<div style="width:300px;height:220px;background:#00A;float:left">block 1</div>
<div style="background:#0A0;display:table-row">block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2</div>
<div style="background:#A00;display:table-row">block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3</div>
<div style="background:#600;display:table-row">block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4</div>

我让区块2出现在区块1的右侧，但问题是，当区块2或区块3超过区块1的高度时，它不会占据页面的整个宽度。

以下是我想要的一个很好的例子：http://sovietrussia.org/o/

如何在不使用表格的情况下实现相同的布局？基本上，左边（图像）有一个块，然后所有其他块都出现在图像的右边或底部，这取决于它是否适合那里，文本块总是占据100%的宽度

Answer 1

试试这个

div
{
display: table-cell;
}

小提琴