ギャップを残して浮かんでいる要素（高さが異なるため）

Question

私は敏感なウェブページを作成しています。

これは私がやろうとしていることです。デスクトップビューでjsfiddle

#container { 
 
    max-width:500px; 
 
    width:100%; 
 
    color: #fff; 
 
} 
 
#one { 
 
    width:300px; 
 
    height:200px; 
 
    background:#66BCD9; 
 
    float:left; 
 
} 
 
#two { 
 
    width:200px; 
 
    height:50px; 
 
    background:#A1A6E6; 
 
    overflow: hidden; 
 
} 
 
#three { 
 
    width:200px; 
 
    height:50px; 
 
    background:#E3A1E6; 
 
    overflow: hidden; 
 
} 
 
#four { 
 
    width:300px; 
 
    height:100px; 
 
    background:#ED5894; 
 
    float:left; 
 
} 
 
#five { 
 
    width:200px; 
 
    height:300px; 
 
    background:#368736; 
 
    overflow: hidden; 
 
} 
 
#six { 
 
    width:300px; 
 
    height:300px; 
 
    background:grey; 
 
    overflow:hidden 
 
}

<div id="container"> 
 
    <div id="one">#one</div> 
 
    <div id="two">#two</div> 
 
    <div id="three">#three</div> 
 
    <div id="four">#four</div> 
 
    <div id="five">#five</div> 
 
    <div id="six">#six</div> 
 
</div>

私は#sixが#fourの底に触れたいと思います。

画面サイズを小さくすると（モバイルビュー）、divは正しく並べられます。

デスクトップビューで#sixの下を#fourの下にタッチするにはどうすればよいですか？

Answer 1

オーバーフロープロパティは、コンテンツをクリップするか、スクロールバーをレンダリングするか、コンテンツがブロックレベルコンテナをオーバーフローしたときに表示するかどうかを指定します。 /*内容がクリップされ、スクロールバーはありません。*/ オーバーフローが発生しました。