2010-09-12 136 views
5
.container 
{ 
position: absolute; 
bottom: 0px; 
height: 25px; 
left: 200px; 
padding-right: 5px; 
background-color: black; 
overflow: hidden; 
} 


.child 
{ 
position: relative; 
float: left; 
height: 100%; 
width: 95px; 
background-color: #99CCFF; 
margin-left: 5px; 
} 

我當瀏覽器窗口的大小小於將允許所有的孩子適應沒有包裝我想那裏有一個滾動條,而不是子元素包裝的默認機制。是否有可能阻止在HTML中包裝子元素?

我不控制子元素的數量,所以我不能在容器上設置寬度。我怎樣才能防止子元素的包裝?

回答

17

如果你不想包裝,你不應該使用浮動 - 它們是專門爲包裝而創建的。

使用父容器與overflow:autowhite-space:nowrap和子display:inlineinline-block

+0

內嵌塊是我需要使用的。謝謝 – Justin808 2010-09-12 23:19:14

+0

@ Justin808:缺點是,如果您希望它能夠在較舊的瀏覽器(FF2,IE6-7)上運行,您需要[一堆解決方法](http://foohack.com/2007/11/cross-瀏覽器的支持換直列 - 嵌段 - 定型/) – Tgr 2010-09-13 00:30:39

0

這對於簡單的HTML和CSS來說並不可行。在不知道子元素的數量的情況下,唯一的方法是根據子元素的數量及其總寬度,使用JavaScript動態設置最小寬度。

0

您可以添加所有子類的父持有者()。然後使用該分區的溢出:自動。如果這不起作用,那麼也可以使用self.innerHeight和self.innerWidth(通過javascript)獲取div高度和寬度。

相關問題