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

Question

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

目前在 Apple's homepage 上可以看到类似的效果，其中手/手腕位于网站容器“外部”，但水平滚动条不可见，除非浏览器的宽度低于 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;  
    }

Answer 1

改变

overflow-x: visible;

在 .content 到

overflow-x : hidden;

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