如何根据子DIV内容自动调整父DIV的高度？

Question

我有一个父级DIV，在父级DIV中，我有两个DIV，一个在左侧，另一个在右侧。当我在左侧或右侧DIV标记中编写任何内容时，我希望父级DIV根据左侧或右侧DIV标记的高度自动调整。

如何编写.css文件来执行此操作？

设计视图中主要的DIV不会根据子DIV进行调整：

请查看我的代码：

<div style="padding: 8px; overflow: hidden; background-color: #FFFFFF;">
    <div style ="float:left">
        <p>Hi, Flo!</p>
      </div>
      <div style ="float:right; height: 180px;"> 
        <p>is</p>
        <p>this</p>
        <p>what</p>
        <p>you are looking for?</p>
      </div>
    </div>

- Sumit Dobriyal

---

还有一个问题 - 如何在父DIV内添加两个DIV，一个在父DIV内的左侧，另一个在右侧..????? - Sumit Dobriyal

你真的在问如何使两个浮动的浮动元素高度相同，并使父元素扩展以包含它们吗？ - Ian Wood

请审查我的代码并帮我纠正错误，谢谢。 - Sumit Dobriyal

那里到底出了什么问题？不要担心Dreamweaver中的设计视图 - 在浏览器中测试它。 - Ian Wood

可能是CSS - 将子DIV的高度扩展到父元素的高度的重复问题。 - dynamic

Answer 1

如果两个子div都是浮动元素，那么你可以使用：

div.parent{ overflow: hidden; }

没有指定高度。

- Ian Wood

---

但是，如果左侧子DIV和右侧子DIV中的内容增加，则父DIV的高度将自动调整... - Sumit Dobriyal

我已经在父元素中设置了overflow:hidden，那么父元素内的左右DIV怎么办？ - Sumit Dobriyal

Answer 2

div.parent{ 
     display:  inline-block;
     width:    100%;
}

我发现这是一个非常好的解决方案。如果你有浮动和非浮动的子元素，高度将自动调整到所需空间的最小值。宽度设置为100％以扩展到父级容器的宽度。

- C-man

---

非常非常好的解决方案。非常感谢你！ - MightyMouse

谢谢MightyMouse！我没想到这个解决方案在发布3年后仍然有效，但我相信它仍然能够帮助你。也许有一种更有效的方法可以使用flex-box来实现，但这种方法简单而优雅。它很有道理。 - C-man

可能是真的，但使用通常的浏览器（IE）的人可能无法查看我想要他们查看的内容，如果我使用flex-box。我的观点是，上面的解决方案就像你所说的那样非常简单和优雅。此外，它得到了更广泛的浏览器支持。在我的当前项目中，我希望与尽可能多的旧浏览器兼容（包括一些过时的IE版本），因此这个解决方案似乎是理想的。再次感谢！我希望我可以多次投票！ :-) - MightyMouse

Answer 3

容器的大小会根据其所包含的内容自动调整，除非您为内部div指定了一些浮动属性。如果您有浮动的div，则可以使用此解决方案：类似问题

- Gatekeeper