中心div上的水平滚动

Question

我对简单的HTML和CSS有疑问。 首先，看看这个例子：

我正在创建一个包含多个背景图像的页面，每个图像的宽度为：1600px（图片上为蓝色，粉红色和绿色）。

页面的主要区域（黄色）居中（边距：0自动;），宽度为：800px。

我希望如此，如果浏览器窗口小于中心区域（800px），则只显示浏览器水平滚动条。

任何想法如何做到这一点？

感谢您提供任何帮助，并对可怕的布局和颜色表示抱歉;）

编辑：

到目前为止我做了什么：

我试图在包装中制作tyupical center div：

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

---

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

然而，自然滚动显示为整个wrape div，我不知道该怎么办？

Answer 1

类似这样的事情

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

Answer 2

我认为 * 可能 * 投掷 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