Question

我正在尝试为我的网站构建一个水平视差滚动。但是，我最终在幻灯片的开头和主页的文本开头之间有了很大的差距。我已经尝试将填充设置为0，边距设置为0，一切都无济于事。有任何想法吗？这是一个截图来说明我的意思： http://i.imgur.com/l9AcKf2.jpg

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>

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

谢谢！

Answer 1

如果你在你的标题类中添加了float：left，那就修复了它

div#header {
color: #FFFFFF;
float: left;
margin: 0 auto;
padding: 0;
position: relative;
top: 0;
width: 960px;

}

幻灯片开头和主页之间的差距很大

1 个答案: