Question

div#inner1和div#inner2位于div#outer内，但div#outer的高度仍显示为height:auto的0px。

如何获得外部div的子元素的高度？

这是我的代码：

#outer {
  width: 300px;
  height: auto;
  background: #ccc;
}

#inner1 {
  float: left;
  width: 100px;
  height: 100px;
  background: #f00;
}

#inner2 {
  float: left;
  width: 100px;
  height: 100px;
  background: #0f0;
}

<div id="outer">
  <div id="inner1"></div>
  <div id="inner2"></div>
</div>

Answer 1

将overflow:auto添加到ID为outer的div中。这将解决您的问题。

Demo

Answer 2

浮动外部div。这将覆盖你的所有高度，无论内在的高举是什么。但是，如果你将提供你的内部div浮动属性。然后我会建议你使用hack clearfix ..

    /* Assuming this HTML structure:

    <div class="clear">
        <div class="floated"></div>
        <div class="floated"></div>
        <div class="floated"></div>
    </div>
*/

.clear:before, .clear:after {
    content: "\0020";
    display: block;
    height: 0;
    overflow: hidden;
}

.clear:after {
    clear: both;
}

尝试这一点确保工作

为什么高度：自动无法处理2个浮动元素？

2 个答案: