5

それで、私は自分のウェブサイトに横スクロールページを作成しようとしています。4 ページあるので、全体のスクロール部分を 400% に設定します。ただし、最初のページに 0 ～ 100%、2 ページ目に 100% ～ 200% などを使用できるように、(CSS、jQuery などを使用して) その 400% をカットすることは可能でしょうか? または、これを回避する別の方法があります(クロスブラウザー/画面サイズの互換性のためにこれを達成しようとしています)。これまでハードピクセルを使用してこれを行うことができましたが、それをパーセンテージに変更する方法はありますか?

HTML:

<div id="transition-slide-container">   
   <div id="transition-slide">
       <div id="inner-container>
        <div class="slide" id="home">
            <h1>home</h1>
        </div>
       </div>
        <div class="slide" id="portfolio">
          <div id="inner-container">
            <h1>portfolio</h1>
          </div>
        </div>
        <div class="slide" id="about">
           <div id="inner-container">
            <p>about</p>
           </div>
        </div>                  
        <div class="slide" id="contact">
           <div id="inner-container">
            <p>contact<p>
           </div>
        </div>
    </div>
</div>

CSS:

div#transition-slide-container {    
    background: #bee1ff;    
    padding-top: 128px;
    padding-bottom: 50px;
    height: 900px;
    min-width: 400%;    
    z-index: -1;
    float: left;
    position: relative;
}
div#transition-slide {
    white-space: nowrap;
}
.slide {
    display: inline-block;
    width: 1620px;
    margin: 0 auto; 
}
div#inner-container {
    width: 1024px;
    margin: 0 auto;
    padding: 0;
}

ウェブサイト: andrewgu12.kodingen.com

4

3 に答える 3

0

変換スライドの幅は 400%、各スライドの幅は 100% にする必要があります。javascript/anchors または overflow-x:scroll; でこれを行う場合、コンテナーは幅 100%、overflow:hidden になります。

于 2013-07-10T07:22:27.247 に答える
0

クラスに100%幅を与えることができます.slide

.slide {
    display: inline-block;
    width: 100%;
    margin: 0 auto; 
}
于 2013-07-10T07:23:27.090 に答える