如何隐藏侧边栏并阻止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扩展并使侧边栏脱离视图？

Answer 1

你可以用，

window.onresize = function(event) {
    if(document.body.cilentwidth < 1020) 
      document.getElementById('sidebar').style.visibility = 'hidden';
    else
       document.getElementById('sidebar').style.visibility = 'visible';
}

在javascript中调整resize事件，检查现有窗口的宽度并根据它，然后根据您的要求使用document.getElementById('sidebar').style.visibility = 'hidden/visible'隐藏/显示div。

Answer 2

说实话，你应该使用一个响应式网格来实现这一点，Twitter的引导程序有一个非常明确的方式来实现你正在寻找的所需行为，但有很多...

Bootstrap