如何让 div 随内容一起增长？答案

【问题标题】：How to make a div grow with content?如何让 div 随内容一起增长？
【发布时间】：2020-11-11 08:11:28
【问题描述】：

关于html，如何让div容器随内容一起增长，而不是手动定义宽高。

<div id="container">
  <div id="logo">
    <img src="someimage.png"/>
  </div>
</div>

无论标志的尺寸是多少，容器都不会随之增长。 :( 我将如何解决这个问题，或者可以解决这个问题吗？

【问题讨论】：

标签： html css

【解决方案1】：

如果您不定义宽度和/或高度，则 div 元素会随其内容一起增长。除非他的内容设置为绝对！如果内容设置为浮动，则必须设置到容器中

overflow:hidden

为了让它成长！

【讨论】：

【解决方案2】：

div 的默认行为是填充整个可用宽度。有几种方法可以覆盖它：

作为最后的手段，考虑使用 javascript。

【讨论】：

【解决方案3】：

使用名为“flex”的神奇css属性，真是太神奇了

yourDiv{
display:flex;
}

只要确保子元素不是 position: absolute，因为这不适用于 flex。

【讨论】：

需要更多信息...正如您的回答所代表的那样，它不适用于可变高度的嵌套 div。
当然可以，我每天都用它，除非 div 是绝对显示的！
这可能是包含在您的答案中的方便信息......所以，“需要更多信息......因为你的答案是它不起作用......”
顺便说一句...absolute 是位置属性值，而不是显示属性值
ok ，值 flex 到 display 属性将允许您在调用的 div 内排列项目。 IT 将帮助您将示例中的所有项目保持在左侧或右侧，甚至将它们以相等的间距分布在 then 之间，水平或垂直。显然，如果 div 是位置固定的、粘性的或绝对的，这将不适用于 flex。这里有更详细的信息，因为我不能在这里写任何东西，它太长了。 css-tricks.com/snippets/css/a-guide-to-flexbox

【解决方案4】：

您可以指定 min-width 和 min-height 并且 DIV 会随着内容的变化调整宽度/高度（当然，不会低于最小宽度/高度）。

代码中最重要的 css 属性（DIV 是可编辑的，所以只需输入文本，它会随着宽度/高度增长）：

 min-height: 200px;
  min-width: 100px;

【讨论】：

【解决方案5】：

如果您使用float，它会阻止<div> 与内容一起成长，因此您可以在float 之后使用clear，它会起作用。

<div class="clear-fix"></div>

.clear-fix{
   clear: both;
}

【讨论】：