Question

以下是我想要实现的布局示例。唯一的问题是，我想隐藏蓝色框的溢出部分而不会搞砸其余的布局。任何接受者？ http://jsfiddle.net/seB5F/27/

Answer 1

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

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

Answer 2

该div的CSS属性是'绝对'。你可能想要'亲戚'之类的东西。

Answer 3

在你的css

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

Answer 4

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

所以你要么使用relative让它在红色框内行动（可能会搞定位），要么在渲染红色后使用JS在蓝色容器上设置正确的样式。请注意，如果您在容器上设置宽度，它将自动尝试包装下面的内框。您可能还想使用一些计算或硬编码来设置高度。

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

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

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

Answer 5

怎么样？