0

我有一个图像和一个侧边栏。

<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在调整窗口大小时阻止“外部”扩展并使侧边栏退出视图？

4

2 回答 2

0

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

引导程序

于 2012-05-05T14:54:12.443 回答
0

你可以用，

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。

于 2012-05-05T15:00:17.420 回答