Question

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

目前在Apple's homepage上也可以看到类似的效果，其中手/手腕位于网站容器的“外部”，但除非浏览器的宽度低于990px宽，否则不会看到水平滚动条。

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

这是我正在使用的代码：

<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;  
    }

Answer 1

变化

overflow-x: visible;

in .content to

overflow-x : hidden;

编辑：如果这不是您的意思，并且您只是希望可见正常工作，请尝试使用overflow代替overflow-x

当子元素超出父div的宽度时，如何防止水平滚动？

1 个答案: