0

经过近一个小时的搜索和另一个小时的实验，我似乎无法找到如何在 CSS/HTML 中执行此操作。

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

带有 div 框的浏览器大小示例

  • A -没有水平滚动条，因为没有隐藏任何内容。一切都以中心为中心。
  • B -没有水平滚动条，因为只有侧 div 被隐藏。主 div 居中。
  • C -将具有水平滚动条，因为现在主 div 无法适应页面。主 div 是中心，应该无法滚动查看侧面 div。

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

看起来这应该是可能的。是吗？我一直在玩溢出，但我什么也做不了。

（要清楚，这是关于水平居中/滚动，而不是垂直）

4

2 回答 2

2

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

.parent {width: 90%; overflow: hidden;}
.parent .child {width: 1200px; margin: auto;}
于 2012-10-12T02:57:32.390 回答
1

使用百分比值来实现这一点

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}

​<strong>现场演示

于 2012-10-12T06:06:21.423 回答