Html 在中心div上水平滚动

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

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

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

我希望这样，浏览器水平滚动条只出现在浏览器窗口小于中心区域（800px）的情况下

有什么办法吗

感谢您的帮助，对于布局和颜色太满表示抱歉；）

编辑：

到目前为止我所做的：

我已尝试在包装器中制作Tyupic center div：

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

但是，对于整个wrape div，滚动条自然会出现，我不知道从这里可以做什么？

类似这样的事情

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

---

我认为是*可能的*抛出

位置

像这样

.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;

}

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>

---

解释一下你做了什么，以及你现在被困在哪里？在这里发布你的努力。哇，这是一个复杂的问题layout@BeerFunding我实际上改变了一点。我把jquery和javascript混合在一起。我认为这应该行得通。您可以使用

@媒体屏幕和

按well@he有一个简单得多的解决方案。但是如果你想实际显示一个位于中间div中的滚动条，我想你可能需要使用我发布的方法。我刚才也尝试了你的解决方案，它同样有效。然而，css在我allready所做的其余代码中得到了更好的应用。

.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;

}