並排排列多個部分

Question

我想讓一個網站有多個部分並排放置，然後用戶有兩個滾動左右按鈕。所有部分必須具有寬度和高度100％，因此內容是全屏的。

我設法定位兩個部分，但問題是我必須不斷添加越來越多的部分，所有這些部分應該出現在最後一部分的右側。

我相信我有錯誤的方法，所以我需要你的幫助。

<div class="wrap"> 
    <section class="first"> 
     <section class="section"> 
      <img src="image1.jpg"> 
     </section> 

     <section class="section"> 
      <img src="image2.jpg"> 
     </section> 
    </section> 

    <section class="second"> 
     <section class="section1"> 
      <img src="image3.jpg"> 
     </section> 
    </section> 
     ... the rest of sections 
</div> 

//css 

.wrap{ 
    display: inline-block; 
    white-space: nowrap; 
    overflow-x: auto; 
} 

.first{ 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

.second{ 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 100%; 
} 

.section{ 
    background-color: black; 
    float: left; 
    width: 100%; 
    height: 100%; 
    display: table; 
    text-align: center; 
} 

.section img{ 
    width: 100%; 
    height: 100%; 
} 

.section1{ 
    background-color: black; 
    float: left; 
    width: 100%; 
    height: 100%; 
    display: table; 
    text-align: center; 
} 

.section1 img{ 
    width: 100%; 
    height: 100%; 
} 

所以這是某種組合的網站，每一個主要的部分代表一個項目，項目裏面我要顯示的圖像，這是全屏幕。

我希望你能理解我。

Answer 1

我不確定這是你以後的樣子，但是我已經成功地將4個相鄰。

檢查這個提琴例如：http://jsfiddle.net/vBPyL/

將離開：100％，左：200％，左：300％等，似乎這樣的伎倆

.fourth{ 
    width: 100%; 
    height: 100%; 
    position:absolute; 
    top: 0; 
    left: 300%; 
    display: table-cell; 
} 

它的工作回到IE9，但當然，IE8不支持html5標籤，我離題了。

希望這有助於