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

【问题标题】：How to auto adjust parent DIV height according to the contents in child DIV?如何根据子DIV中的内容自动调整父DIV高度？
【发布时间】：2012-04-23 12:23:17
【问题描述】：

我在父 DIV 中有一个父 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>

【问题讨论】：

还有一个问题 - 如何在父 DIV 内添加两个 DIV，一个在父 DIV 的左侧，另一个在右侧..?????
你真的在问如何使 2 个浮动 div 具有相同的高度并使括号扩展以包含它们吗？
lan 检查我的代码以纠正这个问题......请帮助我......
究竟是什么在那里不起作用？不用担心 Dreamweaver 中的设计视图 - 在浏览器中进行测试。
CSS - Expand child DIV height to parent's height的可能重复

标签： css html

【解决方案1】：

如果两个子 div 是浮点数，那么您可以使用：

div.parent{ overflow: hidden; }

没有指定高度。

【讨论】：

但我希望如果左子 DIV 和右 Clid Div 内的内容增加，则父 DIV 高度将自动调整....
我已经设置了overflow:hidden in parent，那么parent里面的左右DIV呢？

【解决方案2】：

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

我发现这是一个非常好的解决方案。如果您有浮动子项和非浮动子项，高度将自动调整为所需的最小空间量。宽度设置为100% 展开到父级的宽度。

【讨论】：

非常非常好的解决方案。非常感谢！
谢谢 MightyMouse！我不认为这个解决方案在发布 3 年后仍然有效，但我相信它仍然能够帮助你。使用 flex-box 可能有一种更有效的方法，但这既简单又优雅。这很有意义。
这可能是真的，但如果我使用 flex-box，使用通常嫌疑人 (IE) 的人可能无法查看我希望他们查看的内容。我的观点是，正如您所说，上述解决方案非常简单和优雅。此外，它受到更广泛的浏览器的支持。在我当前的项目中，我希望与尽可能多的旧浏览器兼容（包括一些过时的 IE 版本），所以这个解决方案似乎很理想。再次感谢！我希望我可以多次投票！ :-)

【解决方案3】：

Div 大小会根据它所包含的内容自动调整，除非您为内部 div 指定一些浮动。如果您有浮动 div，您可以使用此解决方案：similar question

【讨论】：