CSS-Div即使内部包含内容也不会扩展

我彼此之间有一堆div,所有div都有一个仅指定CSS的ID。

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

<div id="albumhold">
  <div id="albumpic">Pic here</div>
  <div id="infohold">
    <div id="albumhead">Name | Date</div>
    <div id="albuminfo">Information</div>
  </div>
</div>
<div id="albumhold">
  <div id="albumpic">Pic here</div>
  <div id="infohold">
    <div id="albumhead">Name | Date</div>
    <div id="albuminfo">Information</div>
  </div>
</div>

非常感谢您的帮助。

Aiden Ryan asked 2019-11-17T14:37:45Z
8个解决方案
98 votes

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

除了#albumhold外,您在overflow: hidden;内的所有元素都是浮动的,看起来好像不会占用太多空间。

但是,如果将overflow: hidden;添加到#albumhold(或其他一些CSS来清除其中的浮动内容),它将扩展其高度以包含其浮动的子代。

Paul D. Waite answered 2019-11-17T14:38:31Z
13 votes

有两种解决方案可以解决此问题:

  1. 在最后一个浮动标签之后使用overflow: hidden。 这很好。
  2. 如果您为div设置了固定的高度,或者内容的裁剪很好,请继续:overflow: hidden
Mahendra Liya answered 2019-11-17T14:39:13Z
9 votes

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

试试这个:

我可以使用哪种'clearfix'方法?

sym3tri answered 2019-11-17T14:39:54Z
5 votes

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

Sébastien Gicquel answered 2019-11-17T14:40:21Z
4 votes

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

Debbie answered 2019-11-17T14:40:48Z
1 votes

您在.infohold上的高度是固定的,因此.albumhold div的总和仅为.infohold(20px)+ .albumpic(110px)的高度加上我未在其中包含的任何填充或边距。

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

Dan Blows answered 2019-11-17T14:41:34Z
0 votes

您没有在div中输入id =“ infohold”来键入关闭标签。

Axel Köhler answered 2019-11-17T14:42:06Z
0 votes

如果div内部还有其他浮动div,则它不会扩展,因此,请从内部div中移除浮点数,它将进行扩展。

Mohamed Badr answered 2019-11-17T14:42:38Z
translate from https://stackoverflow.com:/questions/5774315/div-not-expanding-even-with-content-inside