左侧浮动的CSS div位置

Question

所以我有一个css课 .div{ width:300px; height:auto; float:left;}

如果所有div都有相同的高度，我会得到这个结果 documentation

但是如果第二个div的高度比第一个div高，我得到这个结果。问题是第三个div（红色的一个）。它应该直接在第一个div下。

我希望我的结果看起来像这样，但我不能在那里得到它。我不能使用表格因为改变解决方案中的所有内容会花费我们没有的时间。