css - 即使里面有内容，div 也不会扩展

Question

我在彼此内部有一堆 div，所有这些都有一个仅指定 CSS 的 ID。

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

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

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

非常感谢您的帮助。

Answer 1

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

#albumhold 中的所有元素都是 float 的，除了 #albumhead，它看起来不会占用太多空间。

但是，如果您将 overflow: hidden; 添加到 #albumhold(或 some other CSS to clear floats inside it)，它将扩展其高度以包含其 float 的子项。