0

我为我的网站创建了一个横幅，它由 3 个并排的 iPhone 图片组成，每个图片使用背景图片和相对定位。但是，我遇到了水平滚动的问题。即使包含每个 iphone 图像的 div 超出了父 .content div 的宽度，我也不希望在溢出内容无法适应浏览器宽度时出现滚动条。仅当浏览器宽度低于 960 像素时才应显示滚动条。

目前在Apple 的主页上可以看到类似的效果，手/手腕位于网站容器“外部”，但除非浏览器的宽度低于 990 像素，否则看不到水平滚动条。

我希望我已经清楚地解释了这一点，如果不清楚，请告诉我。

这是我正在使用的代码：

<div class="content">
    <div id="iphone-a"></div>
    <div id="iphone-b"></div>           
    <div id="iphone-c"></div>
</div>

.content {
    margin: 0 auto;
    width: 960px;
    height: auto;
    text-align: left;
    overflow-x: visible;
    }

#iphone-a {
    z-index: 1;
    position: relative;
    left: 50%;
    bottom: 0;
    margin-left: -306px;
    height: 657px;
    width: 590px;
    background: url(images/banner.png) 0px 0px;
    }

#iphone-b {
    z-index: 0;
    position: relative;
    top: -545px;
    left: 50%;
    margin-left: -732px;
    height: 319px;
    width: 590px;
    background: url(images/banner.png) 0px -658px;
    }

#iphone-c {
    z-index: 0;
    position: relative;
    top: -864px;
    left: 50%;
    margin-left: 144px;
    height: 319px;
    width: 590px;
    background: url(images/banner.png) 0px -658px;  
    }
4

1 回答 1

1

改变

overflow-x: visible;

在 .content 中

overflow-x : hidden;

编辑：如果这不是你的意思，你只是想让可见的正常工作尝试使用overflow而不是overflow-x

于 2012-05-16T18:40:48.660 回答