如何獲得一個內部div來填充整個包裝div？

我有以下的html代碼：如何獲得一個內部div來填充整個包裝div？

<div class="outer ui-draggable" style="position: relative;"> 
    <div class="inner">Foo bar</div> 
</div>

有了這個CSS：

.outer 
{ 
    background-color: #F7F085; 
    margin: 5px; 
    height: 100px; 
    width: 150px; 
    text-align:center; 
    vertical-align:text-bottom; 
} 
.outer .inner 
{ 
    display:inline; 
    vertical-align:middle; 
    height: 100px; 
    width: 150px; 
}

我想內div來完全填充外層div - 文本塊應該是一個完整的100X150箱。

問題是此代碼不會產生所需的效果。外部div的確是正確的大小，但內部div似乎只填充外部div頂部的一個小區域。

我也嘗試使用height：inherit和width：inherit而不是指定大小。

來源

2010-04-27 ripper234

問題出在display:inline風格。如果你想它像一個正常的DIV行爲，保持它display:block。如果它是display:inline它只會和繼承的行高一樣高。

來源

2010-04-27 20:17:42 Robusto

基本上是一個內聯DIV的行爲像一個SPAN – 2010-04-27 20:20:01

我要接受這個，但我必須等10分鐘:( – ripper234 2010-04-27 20:20:15

可能是因爲垂直對齊樣式屬性。這是一個無效的樣式規則。它僅適用於<tr><td>和<div>帶顯示：表細胞

來源

2010-04-27 20:20:02 Kasturi

如何獲得一個內部div來填充整個包裝div？

回答

相關問題