中心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"); 
}