DIV,身高和浮动

Question

我在蓝色div上浮动红色div像图片一样

<div class="blue">
  <div style="height: 40px; float: left"></div>
  <div style="height: 40px; float: left"></div>
  <div style="height: 40px; float: left"></div>

  <div style="height: 40px; float: left"></div>
  <div style="height: 40px; float: left"></div>
  <div style="height: 40px; float: left"></div>
</div>

我想这样做,所以蓝色div在红色DIV上有高度.当我删除浮动它没关系.

Answer 1

您需要添加 display:table-cell; 或溢出：隐藏；到你的蓝色分区。这将为父级提供其子级的高度。

演示

像这样：

.blue{
   overflow:hidden;
   //or
   //display:table-cell;
}

旁注 - 你的 div 浮动时需要一个宽度。

您还可以选择使您的 div 具有蓝色类浮动。但这可能会导致文档中出现一些不需要的行为（如果 div 不应该浮动）。