你如何隐藏这个溢出？答案

【问题标题】：How do you hide this overflow?你如何隐藏这个溢出？
【发布时间】：2011-07-15 08:17:02
【问题描述】：

以下是我尝试实现的布局示例。唯一的问题是，我想隐藏蓝色框的溢出部分而不搞砸其余的布局。有接盘侠吗？ http://jsfiddle.net/seB5F/27/

【问题讨论】：

【解决方案1】：

这样好吗？ http://jsfiddle.net/simevidas/seB5F/33/

您必须删除position:absolute。
我使用display:inline-block + white-space:nowrap 而不是float。

使用font-size:0 hack 的增强演示：http://jsfiddle.net/simevidas/seB5F/34/

【讨论】：

【解决方案2】：

该 div 的 CSS 属性是“绝对的”。你可能想要像'relative.

【讨论】：

@vicTROLLA- nope- 这会搞砸布局，如果你尝试过就会看到。
@Yarin 这有点不公平，你没有给我们你想要的样子，只是现在的样子（这是你不想要的它看起来像）。如果您同时指定height=100% 或将position:absolute 更改为parent，它会起作用。但你需要更清楚你想要它最终成为什么。
您应该使用overflow: auto;，而不是position: absolute; 来处理这些浮动。
@no.good.at.coding - 什么不清楚？我特别解释了我想在保留当前布局的同时隐藏溢出。不明白你的困惑。

【解决方案3】：

在你的 CSS 中

#stretchable-div{
    background:blue;
    position: absolute;
     width:200px;
}

【讨论】：

【解决方案4】：

除了@vicTROLLA给出的答案，你可以使用javascript获取红色框的宽度，然后为蓝色框设置容器的宽度（stretchable-div，或其他），然后设置溢出在那个容器上隐藏。

所以要么你使用relative 让它表现得像在那个红色盒子里面（可能会搞砸定位），或者你使用JS 在红色被渲染后在那个蓝色容器上设置正确的样式。注意，如果你在容器上设置了宽度，它会自动尝试包裹下面的内盒。您可能还想使用一些计算或硬编码的数字来设置高度。

例如，让你的 CSS 看起来像这样：

#stretchable-div {
   background: none repeat scroll 0 0 blue;
   height: 60px;
   overflow: hidden;
   position: absolute;
   width: 200px;
}

看起来就像你想要的那样。您需要使用 Javascript 或服务器端语言来计算正确的宽度/高度，除非您想对其进行硬编码。

【讨论】：

【解决方案5】：

这样的http://jsfiddle.net/seB5F/32/

【讨论】：