如何使內容水平顯示在頁面的分隔部分？

我試圖爲我的頁面構建一個水平視差滾動條。然而，我似乎無法讓內容出現在頁面的不同部分，它們只是全部出現在除了垂直分開的相同部分上。有任何想法嗎？如何使內容水平顯示在頁面的分隔部分？

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/

來源

2013-07-09 Andrew

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格式化的工作原理是，如果您爲塊指定了左側，則放置下一個塊時，應指定大於0的餘量。對於auto，它將從絕對位置開始邊緣化。所以所有的內容都可能出現在一個區塊中，並且會混亂。

來源

2013-07-09 07:32:22 milit16

如果你想堆這些幻燈片到內容領域，你需要添加以下內容：

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-09 07:48:28

如何使內容水平顯示在頁面的分隔部分？

回答

相關問題