在调整大小时部分隐藏侧翼div

Question

经过近一个小时的搜索和另一个小时的实验，我似乎无法在CSS / HTML中找到如何做到这一点。

给出以下图像，其中蓝色框是以固定像素宽度保持页面主要内容的div，红色框是以固定像素宽度保持装饰的div，黑色线显示浏览器大小：

• A - 不会显示水平滚动条，因为没有隐藏任何内容。一切都集中在一起。
• B - 不会显示水平滚动条，因为只隐藏了侧边div。主要的div是居中的。
• C - 会设置水平滚动条，因为现在主div不适合页面。主div是中心，不应该滚动查看侧面div。

我希望为页面添加额外的装饰，而不会对屏幕分辨率较小的用户或只是调整窗口大小的用户造成伤害。主div将保留主要内容，因此用户应该能够滚动查看所有内容。另一方面，侧面div仅用于装饰，因此浏览器不应该基于它们滚动。我宁愿不将侧面div设置为背景图像，因为我希望增加自由度。

似乎这样应该是可能的。是吗？我一直在玩溢出，但我无法工作。

（很明显，这是关于水平居中/滚动，而不是垂直）

Answer 1

您应该使用CSS：overflow: hidden;来实现此效果。有两个div，一个更长，另一个有流体宽度。

.parent {width: 90%; overflow: hidden;}
.parent .child {width: 1200px; margin: auto;}

Answer 2

使用百分比值来实现此目标

HTML

<div class="outer">
    <div class="d1"></div>
    <div class="d2"></div>
    <div class="d3"></div>
</div>​

CSS

.outer{wisth:100%;border:solid 1px black; padding:25px}
.d1{background:red; width:32%; height:60px; display:inline-block}
.d2{background:green; width:32%; height:60px; display:inline-block}
.d3{background:blue; width:32%; height:60px; display:inline-block}

<强> LIVE DEMO