html - 如何隐藏侧边栏并阻止 div 容器换行？

Question

我有一张图片和一个侧边栏。

<div id="outer" style="max-width:1020px;min-width:730px;overflow:hidden;overflow-x:hidden;overflow-y:hidden;">

  <div id="image" style="float:left;max-width:720px;">
    <img src="image.jpg" alt="" style="max-width:720px;" />
  </div>

  <div id="sidebar" style="width:300px;float:right;">
    content
  </div>

</div>

如果调整窗口大小并且没有足够的空间来显示侧边栏，我希望侧边栏消失。

不幸的是，在调整窗口大小时，侧边栏会掉到底部并换行。

我试过 white-space: nowrap;，但这似乎不适用于此处。图像容器可以有不同的高度，所以我不能将它设置为固定高度。

如何阻止“外部”div 扩展并在调整窗口大小时使侧边栏从 View 中消失？

Answer 1

老实说，您应该使用响应式网格来实现这一点，Twitter 的 Bootstrap 有一种非常清晰的方式来实现您正在寻找的所需行为，但还有很多......

Bootstrap