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

Question

我有一堆div在彼此里面,所有的div都有一个ID,它只指定CSS.

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

这是我的HTML

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

和HTML代码的CSS:

<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

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

内部的所有元素#albumhold都是浮动的,除了#albumhead它看起来不会占用太多空间.

但是,如果添加overflow: hidden;到#albumhold(或其他一些CSS以清除里面浮动),将扩大其高度涵盖了浮动的孩子.

Answer 2

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

1. clear:both在最后一个浮动标记之后使用.这很好用.
2. 如果您的div有固定的高度或剪辑内容很好,请使用: overflow: hidden

Answer 3

您可能需要明确的解决方案.

试试这个:

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

Answer 4

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