容器div高度不會根據內容增加大小

Question

當內容div增長時，我的容器div高度不會增加大小。在下面的代碼中，我希望類名爲summary的div的大小增加，因爲div house-address增長。任何幫助都感激不盡。

HTML：

<div class="summary shortS"> 
    <div class="house-address"> 
     <h2>booboo</h2> 
     <p>hehe hehee hdhddgf jfhfjf lkjgkhgh kjgkjg itutiut mhvjhgjhfg nbcncnb nbcnbc</p> 
    </div> 
    <div class="house-price"> 
     <h4>$17272</h4> 
     <p>Guide Price</p> 
    </div> 
    <br style="clear:both;" /> 
</div> 

CSS：

.summary.shortS { 
    display: block; 
    height: 64px; 
} 

.house-address { 
    width: 400px; 
    float: left; 
} 

.house-price { 
    width: 150px; 
    float: right; 
} 

Answer 1

擺脫height: 64px的。

http://jsfiddle.net/cZsS5/

編輯：作爲建議，min-height: 64px大概所需的樣式。

Answer 2

你的問題是，你要定義一個明確的height的元素（只要它也有shorts一類的名稱，該元素設置對特定高度無論它的內容：

.summary.shortS { 
    display: block; 
    height: 64px; 
} 

代替height使用min-height（如果任何形式的'高度必須被定義爲強制頁面上的知名度，例如，即使是空的）：

.summary.shortS { 
    display: block; 
    min-height: 64px; 
} 

否則只需完全刪除height聲明。

JS Fiddle demo。

Answer 3

.summary.shortS { 
display: block; 
min-height: 64px; 
height: auto; 
float: left; 
}