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

如何隐藏侧边栏并阻止div容器包装？

2 个答案: