html - 当浏览器达到一定大小时如何折叠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 像素处开始。

希望能解决它。

如果你还没有听说过媒体查询，谷歌它们，你可以用它们做一些很酷的事情。