css - 浮动 div 没有按照我想要的方式对齐

Question

一个非常简单的css问题。我有一个页面，我希望我的块很好地浮动：

<div style="float: left; width: 620px;">
    <div style="float: left; width: 300px; background-color: Red; height: 230px;"></div>
    <div style="float: left; width: 300px; background-color: Blue; height: 330px;"></div>
    <div style="float: left; width: 300px; background-color: Green; height: 230px;"></div></div>

我希望绿色 div 显示在红色 div 下方，并且不与蓝色 div 的末尾对齐。

更改顺序对我来说不是解决方案，因为它们是从数据库中按特定顺序出现的。

问候乔纳斯

Answer 1

如果我正确理解了您的要求，那么以下就是您所需要的。

我将 Blue 更改为div，float: right使 Greendiv位于 Red 下方div。

<div style="float: left; width: 620px;">
    <div style="float: left; width: 300px; background-color: Red; height: 230px;"></div>
    <div style="float: right; width: 300px; background-color: Blue; height: 330px;"></div>
    <div style="float: left; width: 300px; background-color: Green; height: 230px;"></div>
</div>

工作演示

Answer 2

<div style="float: left; width: 620px;">
    <div style="float: left; clear: left; width: 300px; background-color: Red; height: 230px;"></div>
    <div style="float: right; width: 300px; background-color: Blue; height: 330px;"></div>
    <div style="float: left;  clear: left; width: 300px; background-color: Green; height: 230px;"></div>
</div>

活生生的例子。

Answer 3

<div style="clear:left;float: left; width: 300px; background-color: Green; height: 230px;"></div>

或者

<br><div style="float: left; width: 300px; background-color: Green; height: 230px;"></div>

或者

<div style="float: left; width: 330px;">

由你决定。