私は最初の行divのすぐ下に2番目の行divを配置したい

Question

私は最初の行に3つのdivがあり、3番目のdivは大きな高さを持つ2つの行があります。 2番目の行には1つのdivがあります.2番目と4番目のdivの親divを取る代わりに、最初の行divのすぐ下に2番目の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

yahhはちょうど両方のあなたが鎮圧したいそれらのdivに明確に追加します。

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

Answer 2

よう あなたは、私が正しい理解していれば、それを達成する必要がある場合はたぶん、あなたはあなたのdivに異なる構造を試してみてください。..

左ペインと1行分のカスケードのdivと1行を作成します。右側のページ（第3欄）

<div class="left-pane"> 
    <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:blue;">4</div> 
</div> 
<div class="right-pane"> 
    <div style="width:20%;padding:40px;background-color:green; height:500px;">3</div> 
</div> 

これがうまくいくかどうか教えてください。私は喜んでお手伝いします。

Answer 3

最後に私自身の解決策を得ました。あなたの努力に感謝します。

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

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

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

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