液體佈局中的最小邊距

Question

當達到最小邊距時，如何防止內容跳到邊欄下方？

http://jsfiddle.net/7SAHm/4/

<div id="wrapper"> 
    <div id="sidebar"></div> 
    <div id="content"></div> 
</div> 

#wrapper { 
    width: 100%; 
    overflow:hidden; 
} 
#sidebar { 
    float:left; 
    width: 20%; 
    min-width:50px; 
    background-color:#ffb8e0; 
} 
#content { 
    float:left; 
    width:80%; 
    background-color:#fff7b8; 
} 

嘗試調整瀏覽器窗口，您會看到內容跳下來，相反，我希望它留彼此相鄰，儘管80％+ 50像素>包裝寬度，instad它應該溢出沒有跳下去。

在此先感謝！

Answer 1

您應該使用媒體查詢在你的CSS改變percentage-

我編輯了自己的代碼，向您展示一個演示http://jsfiddle.net/kevinPHPkevin/7SAHm/5/

@media screen and (max-width: 400px) { 
    #sidebar { 
     width: 50%; 
    } 
    #content { 
     width:50%;  
    } 
}