液体布局中的最小保证金

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＆gt;包装器宽度，它应该溢出而不会跳下来。

提前致谢！

Answer 1

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

我已修改您的代码，以向您展示演示http://jsfiddle.net/kevinPHPkevin/7SAHm/5/

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