Question

在我的一个项目中处理html代码时我面临一个问题，其中我将一个主div作为容器，其中我在左侧位置采用了一个子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。这会导致它清除任何浮动的物品而忽略那些浮动的物品。

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

Answer 2

我不太确定你想要什么，但这就是我对它的理解。

尝试运行此代码段：

＆＃13;

<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;position:relative;top:-40px;">
     3rd div
     </div>   
</div>

＆＃13;

我刚才补充道位置：相对; 顶部：-40px;

-40 px意味着它向方向＆＃34;顶部＆＃34;移动40个像素。这使得该对象上升。但是如果你输入的是40px而不是-40，那么距离＆＃34; top＆＃34;让它失败:)）

希望这可以帮助你：）

根据html中的要求，没有获得div的正确位置

2 个答案: