浮動元素留下間隙（由於不同的高度）

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

overflow屬性指定是否剪裁內容，渲染滾動條或僅當內容溢出其塊級別容器時顯示內容。 /*內容被剪裁，沒有滾動條*/ 溢出：隱藏;