当浏览器达到一定大小时如何折叠div，（调整窗口大小时忽略包装器div？）

Question

我有类似的html：

<div id="container">
   <div id="content">
      <!-- whole site here -->
   </div>
</div>


#container {
  width: 1280px;
  background-image: url(/image);
}

#content {
  width: 890px;
}

有没有人知道一种方法，这样当浏览器窗口的大小调整到小于 1280 像素时，它不会启动水平滚动条，直到达到内容宽度 (890 像素)？ 我有几个小时以来一直在为此绞尽脑汁。我听说过各种负边距技巧，尝试了几次都无济于事。主要问题是，我什至不知道这叫什么，所以很难搜索。有人能指出我正确的方向吗？谢谢。

Answer 1

你试过了吗：

@media all and (max-width: 1280px) {
    #container { width: 100%; }
}

以上所做的，就是将#container设置为屏幕宽度，当屏幕宽度小于1280像素时。

由于#content 仍具有固定宽度，滚动条应在 890 像素处启动。

希望能解决。

如果您还没有听说过媒体查询，请用 Google 搜索，您可以用它们做一些很酷的事情。