html - 容器 div 高度不会根据内容增加大小

Question

当内容 div 增长时，我的容器 div 高度不会增加。在下面的代码中，我希望具有类名的 divsummary的大小随着 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 小提琴演示。

Answer 3

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