html - 我想将第二行 div 放在第一行 div 的正下方

Question

我有两行，第一行有三个 div，第三个 div 的高度很高。在第二行我有一个单独的 div。我只想将我的第二行 div 放在第一行 div 的正下方，而不使用 margin top in negative 并且顺序应该相同而不是采用 1,2 和第 4 个 div 的父 div。提前谢谢你。

div{
 float: left;
    color: white;
    text-align: center;
    font-size: 16px;
    vertical-align: middle;
}

<div style="width:40%;padding:40px;background-color:pink;"> 
1
</div>

<div style="width:20%;padding:40px;background-color:black;">
2
</div>

<div style="width:20%;padding:40px;background-color:green; height:500px;">
3
</div>
<div style="width:20%;padding:40px;background-color:blue;">
4
</div>

Answer 1

是的，只需将两者都添加到您想要放下的那些 div。喜欢

<div style="width:20%;padding:40px;background-color:black;clear: both;">2</div>