如何隐藏侧边栏并阻止 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

说实

话，你应该使用响应式网格来实现这一点，Twitter的bootstrap有一个非常清晰的方式来实现你正在寻找的所需行为，但那里有很多。

启动

Answer 2

你可以使用，

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

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