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

<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>

Live example

Answer 2

如果我理解您的要求，则以下是您的需求。

我将蓝色div更改为float: right，以便绿色div位于红色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>

Working Demo

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;">

取决于你。

浮动div不符合我想要的方式

3 个答案: