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

第3个div因为没有足够的空间漂浮而崩溃你的3个div加起来（包括边距）等于120px;
包装器（#main）是100px 因此撞倒第3个div。

如果我理解你的问题......
你要做的就是隐藏第3个div，为了你这样做，你需要：
添加另一个包装div并给它一个更大的宽度。看看我的example here

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上的内联并添加了white-space：nowrap到#main。

Answer 3

是因为div中的div#main仅限于div#main样式中指定的维度。要漂浮到无穷大以及更远，他们需要有一个漂浮的空间。您可以将div包装在高度非常高的容器中。

尝试使用此demo。

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

3 个答案: