中心div上的水平滾動

Question

我對簡單的HTML和CSS有疑問。 首先，看一下這個圖：

我想提出一個頁面與多背景圖片，每一個都具有寬度：1600像素（藍色，粉色和綠色的圖片）。

頁面的主要區域（黃色）居中（margin：0 auto;）並且寬度：800px。

我希望它是如此，如果瀏覽器窗口小於中心區域（800px），瀏覽器水平滾動條纔會出現。

任何想法如何做到這一點？

任何幫助的感謝和抱歉的awfull佈局和顏色;）

編輯：

我做了什麼至今：

我試圖讓tyupical中心DIV的包裝：

<div id="wrap"> 
    <div id="child"> 

---

#wrap{ width:1600px; } 
#child{ width: 800px; margin: 0 auto;} 

然而，自然滾動顯示爲整個劃分div，我不知道該從這裏做什麼？

Answer 1

我覺得是 * 可能 * 擲position

作爲這樣

HTML

<div class="one"></div> 
<div class="one2"></div> 
<div class="one3"></div> 

<div class="parent"> 
Hello i m cente div <br> 
Hello i m cente div <br>Hello i m cente div <br>Hello i m cente div <br>Hello i m cente div <br>Hello i m cente div <br>Hello i m cente div <br>Hello i m cente div <br>Hello i m cente div <br> 
</div> 

的CSS

.one, .one2, .one3{ 
    height:200px; 
} 
.one{ 
    background:red; 
} 
.one2{ 
    background:green; 
} 
.one3{ 
    background:yellow; 
} 
.parent{ 
    background:blue; 
    position:absolute; 
    width:200px; // width according to your design 
    left:50%; 
    margin-left:-100px; // according to your width/2 and define -margin 
    top:0; 

} 

Live Demo

Answer 2

像這樣

if ($(window).width > 800){ 
    $("#thediv").css("overflow-x","hidden"); 
} 
else{ 
    $("#thediv").css("overflow-x","scroll"); 
}