css - 流动布局中的最小边距

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%+50px > 包装宽度，它应该溢出而不是跳下。

提前致谢！

Answer 1

您应该在 CSS 中使用媒体查询来更改百分比 -

我已经编辑了您的代码，向您展示了一个演示http://jsfiddle.net/kevinPHPkevin/7SAHm/5/

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