在这个例子中如何隐藏溢出？

Question

您可以在这里看到小提琴： http://jsfiddle.net/easeS/4/

这是我有 html/css：

#main div
{
 float:left;
 width:30px;
 margin-right:10px;   
}
#main
{
 overflow:hidden;
    width:100px;
    height:50px;
    border:1px solid;
}

<div id="main">
    <div>test1</div>
    <div>test2</div>
    <div>test3</div>
</div>

我不知道为什么，但它会将第三个 div 向下移动到新行而不是隐藏它。有什么建议吗？

Answer 1

第三个 div 向下碰撞，因为没有足够的空间让它浮动。
您的 3 个 div 加起来（包括边距）等于 120px；
包装器 (#main) 为 100px。
因此，将第三个 div 降低。

如果我正确理解你的问题...
您想要做的是将其隐藏在第三个 div 中，为此，您需要：
添加另一个包装 div 并给它更大的宽度。看看我的这里的示例

Answer 2

不需要添加额外的包装 div...

试试这个：

#main div 
{
 display:inline;
 width:30px;
 margin-right:10px;   
}
#main
{
 overflow:hidden;
    width:100px;
    height:50px;
    border:1px solid;
    white-space: nowrap;
}

只需将浮动规则更改为在 div 上显示：内联，并将空白：nowrap 添加到#main。

Answer 3

这是因为 div#main 中的 div 仅限于 div#main 样式中指定的尺寸。为了漂浮到无限远甚至更远，它们需要有一个漂浮的空间。您可以将 div 包裹在高度非常高的容器中。

尝试使用此演示。