HTML CSS佈局不按預期呈現

Question

我正在創建一個響應式網頁。

這就是我想要做的。 jsfiddle

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

在桌面視圖我想#five觸摸的#three底部。

當您使屏幕尺寸變小（移動視圖）時，div按順序排列正確。

如何在桌面視圖中使#five觸摸#three的底部？從#five

Answer 1

刪除float: right並添加overflow: hidden

#five { 
    width:200px; 
    height:70px; 
    background:#368736; 
    overflow: hidden; 
} 

#container { 
 
    max-width:500px; 
 
    width:100%; 
 
    color: #fff; 
 
} 
 
#one { 
 
    width:300px; 
 
    height:200px; 
 
    background:#66BCD9; 
 
    float:left; 
 
} 
 
#two { 
 
    width:200px; 
 
    height:50px; 
 
    background:#A1A6E6; 
 
    float:right; 
 
} 
 
#three { 
 
    width:200px; 
 
    height:50px; 
 
    background:#E3A1E6; 
 
    float:right; 
 
} 
 
#four { 
 
    width:300px; 
 
    height:100px; 
 
    background:#ED5894; 
 
    float:left; 
 
} 
 
#five { 
 
    width:200px; 
 
    height:70px; 
 
    background:#368736; 
 
    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>