html - 中心 div 上的水平滚动

Question

我有一个关于简单 HTML 和 CSS 的问题。首先，看这个插图：

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

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

如果浏览器窗口小于中心区域（800px），我希望它是这样的，浏览器水平滚动条只出现。

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

感谢您对糟糕的布局和颜色的任何帮助和抱歉；）

编辑：

到目前为止我做了什么：

我试图在包装器中制作典型的中心 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;

}

现场演示