Question

我有一堆div在彼此里面，所有的div都有一个只指定CSS的ID。

但由于某种原因，周围的DIV标签只扩展到它的受膏高度值，而不是它的默认自动值，这意味着尽管内容在内部，但支持DIV只是一个特定的高度。我需要它将高度调整到其内部的任何大小（因为用户提交的数据可能会在500多个单词的段落中回显。）

这是我的HTML

<div id="albumhold">

    <div id="albumpic">Pic here</div>

    <div id="infohold">

    <div id="albumhead">Name | Date</div>
    <div id="albuminfo">Information</div>

</div>

HTML代码的CSS：

#albumhold {
    width: 920px;
    padding: 10px;
    height: auto;
    border: 1px solid #E1E1E1;
    margin-left: auto;
    margin-right: auto;
    background-color: #E1E1E1;
    background-image: url(../global-images/albumback.png);
    background-position: top center;
    background-repeat: repeat-x;
}

#albumpic {
    display: block;
    height: 110px;
    width: 110px;
    float: left;    
    border: 1px solid #000;
}

#infohold {
    width: 800px;
    background-color: #CCC;
    float: right;
    height: 20px;
}

#albumhead {
    width: 800px;
    height: 20px;
    text-indent: 10px;
    border: 1px solid #000;
    color: #09F;    
}

#albuminfo {
    margin-top: 5px;
    width: 800px;
    float: right;
    color: #09F;
    word-wrap:break-word;
}

非常感谢帮助。

Answer 1

浮动元素不会占用其包含元素中的任何垂直空间。

除了#albumhold之外，#albumhead内的所有元素都会浮动，这看起来不会占用太多空间。

但是，如果您将overflow: hidden;添加到#albumhold（或some other CSS to clear floats inside it），它会将其高度扩展为包含其浮动子项。

Answer 2

有两种解决方法可以解决这个问题：

在最后一个浮动标记后使用clear:both。这很好用。
如果你的div有固定的高度或剪辑内容很好，请使用：overflow: hidden

Answer 3

您可能需要一个明确的解决方案。

试试这个：

What methods of ‘clearfix’ can I use?

Answer 4

在最后一个浮动div之后放置<br clear="all" />对我来说是最好的。感谢Brent Fiare＆amp; Paul Waite提供的浮动div的信息不会扩大父div的高度！这让我疯了！ ; - }

Answer 5

在最后一个浮动div为我工作后添加<br style="clear: both" />。

Answer 6

.infohold上有一个固定的高度，所以.albumhold div只会加到.infohold（20px）+ .albumpic（110px）的高度加上我没有包含的任何填充或边距。< / p>

尝试删除.infohold上的固定高度，看看会发生什么。

Answer 7

如果内部有其他浮动div，则

div不会展开，所以从内部div中移除浮动并且它会展开。

答案 7 :(得分：0)

您没有使用 id =“infohold 从div中键入关闭标签。

Answer 8

您没有使用 id =“infohold 从div中键入关闭标签。

即使有内容，Div也不会扩展

8 个答案: