css - 在调整大小时部分隐藏侧翼 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;}