html - 没有按照 html 中的要求获得正确的 div 位置

Question

在我的一个元素中处理 html 代码时，我遇到了一个问题，我将一个主 div 作为容器，在其中我在左侧位置使用了一个子 div，在右侧位置使用了第二个，在右侧位置使用了第三个下一行。直到现在我的代码运行得非常完美，正如您在我的代码中看到的那样。但是我希望我的第三个 div 恰好在我的第一个 div 的底部，其高度小于我的第二个 div。所以，我只想知道它们在 html 或 css 中的任何其他属性，除了在我的第三个 div 中使用“margin-top”属性，我可以通过它来实现。为了更清楚地说明这一点，我在下面给出了一个示例。

如果有人愿意打扰我的问题并给我任何建议，我将非常高兴。在此先感谢您。

<div style="width:500px;">
        <div style="width:150px;height:50px;background-color:black;float:left; color:white;">
        1st div
        </div>
    
        <div style="width:100px;height:100px;background-color:#0CF;float:right;">
        2nd div
        </div>
    <div style="clear:both"></div>
     <div style="width:50px;height:50px;background-color:#F00;float:left;">
     3rd div
     </div>   
</div>

Answer 1

您需要先删除 <div>与 clear:both; - 这会将您的第三个 div 推到其他两个之下。

然后添加clear:left;到第三个分区。这会导致它清除所有向左浮动的元素，同时忽略向右浮动的元素。

<div style="width:500px;">
    <div style="width:150px;height:50px;background-color:black;float:left; color:white;">
    1st div
    </div>

    <div style="width:100px;height:100px;background-color:#0CF;float:right;">
    2nd div
    </div>
 <div style="width:50px;height:50px;background-color:#F00;float:left;clear:left;">
 3rd div
 </div>   

参见 JSFiddle

您可能还想看看 this question on SO , 其中包括 float和 clear更详细。