1

我正在尝试创建一个网站，其中有 .wrapper 沿页面中间垂直运行，.banner 在页面顶部附近水平传播。.banner 将包含一个 1600x400 的图像以及一些链接。我想要做的是创建一个横幅将“跑出”页面的效果。为此，我希望水平滚动条仅在浏览器宽度小于 .wrapper 宽度时出现。我正在尝试实现类似EA 主页的效果，其中水平滚动条仅在浏览器宽度小于内容而不是横幅时出现。

我想要的图片：

在此处输入图像描述

要求：

  • 仅当浏览器宽度小于 .wrapper 的宽度时才显示水平条
  • 当浏览器宽度小于 .banner 的宽度时，不显示水平条
  • .banner 必须一直可见到浏览器的右侧（不能被 .wrapper 截断）

我看到了另一个与我的类似的帖子，但没有解决。我尝试了一些建议的解决方案，但对我没有帮助。

代码：http: //jsfiddle.net/NZb3w/

<div class="wrapper">
    <div class="banner">
        <img src="http://www.placehold.it/1600x400">
    </div>
</div>

.wrapper {
    width: 960px;
    margin: 0 auto;
    background: #ccffff;
    height: 800px;
    padding-top: 50px;
}
4

3 回答 3

0

也许试试

.wrapper {
  min-width: 960px; 
  overflow-x:auto;
  width: 100%;
}

这将允许宽度 to.wrapper拉伸大于 960 像素，但一旦达到 959 像素，它将添加滚动条。

于 2012-09-15T04:29:34.843 回答
0

尝试使用 max-width ，这样当 div 获得最大宽度时，它将设置 scroll-x: 或 y 任何你需要的。

.wrapper {
  max-width: 960px;
  margin: 0 auto;
  background: #ccffff;
  height: 800px;
  overflow: auto;
  padding-top: 50px;;
}
于 2012-09-15T19:17:44.823 回答
-1

对您的页面或宽度使用 css 'min-width' 属性，以便元素在限制后不会缩小，并且在此之后会出现滚动条。使用 overflow:hidden 禁用滚动条。

于 2012-09-15T04:03:24.007 回答