如何在這個例子中隱藏溢出？

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> 

我不知道爲什麼，但它對顛簸的第三格下降到新的生產線，而不是隱藏它。有什麼建議麼？

Answer 1

由於沒有足夠的空間浮動，所以第三個div碰撞。
您的3個div加在一起（包括邊距）等於120px;
包裝（#main）是100px。
因此衝擊第三格。

如果我理解正確你的問題...
你想要做什麼是隱藏的第三格，因爲你要做到這一點，你需要：
添加其他包裝的div，並給它更大的寬度。看看我的example here

Answer 2

是因爲您在div#main中的div僅限於div#main風格中指定的尺寸。爲了漂浮到無限遠以及更遠處，他們需要有一個空間來漂浮。你可以將你的div包裝在一個高度很高的容器中。

試試用這個demo。

Answer 3

無需添加額外的包裝的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到＃主要。