0

我正在尝试为我的页面构建一个水平视差滚动。但是，我似乎无法让内容出现在页面的不同部分，它们只是出现在同一部分，除了垂直分开。有任何想法吗？

HTML：

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

CSS：

div#transition-slide-container {    
    background: #bee1ff;
    height: 100%;
    padding-top: 128px;
    padding-bottom: 200px;
    width: 400%;
    min-height: 600px;
    z-index: -1;
    overflow: auto;
} 
.slide {
    min-width: 100%;
} 
div#home {
    width: 960px;
    margin: 0 auto;
    height: 600px;
} 
div#portfolio{
    width: 960px;
    margin: 0 auto;
    height: 700px;
}
div#about{
    width: 960px;
    margin: 0 auto;
    height: 600px;
}
div#contact {   
    width: 960px;
    margin: 0 auto;
    height: 600px;
 }

网站：http ://andrewgu12.kodingen.com/ 编辑：我意识到我对我的问题的措辞并不那么具体，我忘记补充的是我希望所有这些都被水平分割，就像在这里看到的一样： http: //markdalgleish.com/projects/stellar.js/

4

2 回答 2

0

如果要将这些幻灯片堆叠到内容区域中，则需要添加以下内容：

div#transition-slide-container {
    position: relative;
}

和

div#transition-slide-container .slide {
    position: absolute;
    top: 0;
    width: 960px;
    margin: 0 auto;
}

这将绝对相对于它们的容器定位幻灯片，一个在另一个之上。

由于幻灯片 div 都意味着具有相同的尺寸，因此无需单独声明它们。div#home等div#portfolio可以去掉

现在您将您的内容添加到您的幻灯片中，并在每张幻灯片的基础上定位/动画/显示/隐藏它，

于 2013-07-09T07:48:28.813 回答
0 
div.dx
 {
 width:1012px;
 padding:5px;
 border:1px solid gray;
 margin-left:273px;
 margin-top:15px;
 }
div.ex
 {
 width:1000px;
 padding:5px;
 border:1px solid gray;
 margin-left:273px;
 margin-top:5px;
 }

CSS 格式化的工作原理是，如果你为一个块指定了​​ left，那么为了放置下一个块，你应该指定 margin 大于 0。 至于 auto，它会从绝对位置开始边缘化。所以所有的内容可能会出现在一个块中，并且会很混乱。

于 2013-07-09T07:32:22.880 回答