0

背景画像とそれぞれの相対位置を使用して、3 つの iPhone 画像を並べて構成する Web サイト用のバナーを作成しました。ただし、水平スクロールに問題があります。これは、各 iphone 画像を含む div が親の .content div の幅を超えているにもかかわらず、オーバーフローしたコンテンツがブラウザの幅に収まらない場合にスクロールバーを表示したくないということです。ブラウザの幅が 960px 未満の場合にのみ、スクロールバーを表示する必要があります。

現在、 Apple のホームページでも同様の効果が見られます。ここでは、手/手首が Web サイトのコンテナの「外側」にありますが、ブラウザの幅が 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;

in .content to

overflow-x : hidden;

編集：それがあなたの意味ではなく、正しく動作するように表示したいだけの場合は、overflow代わりに使用してみてくださいoverflow-x

于 2012-05-16T18:40:48.660 に答える