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;
}

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

3 个答案: