如何让div与内容一起成长？

Question

与html有关，如何使div容器与内容一起增长，而不是手动定义宽度和高度。

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

无论徽标的尺寸是多少，容器都不会随之生长。 :( 我该如何解决这个问题，还是可以修复它？

Answer 1

如果未定义宽度和/或高度，div元素将随其内容一起增长。除非他的内容设置为绝对！如果内容设置为float，则必须设置为容器

overflow:hidden

为了让它成长！

Answer 2

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

• 设置display: inline-block（不是IE友好的）
• 漂浮它（带有副作用，好吧，漂浮它）
• 设置display: inline（但这几乎不是你想要的）
• 设置position: absolute
• 硬编码宽度（尽管没有动态宽度）

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

Answer 3

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

yourDiv{
display:flex;
}

确保子项不是position：absolute，因为这不适用于flex。

Answer 4

如果您使用float，它将阻止<div>随着内容的增长而增长，因此您可以在clear之后使用float，它将起作用。

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

.clear-fix{
   clear: both;
}

Answer 5

您有示例代码吗？ div总是它的容器的整个宽度为block-level元素。

Answer 6

You can specify min-width and min-height and DIV will adjust width / height as the content changes (of course, not below min width/height).

Working code pen example

Most important css properties from the code (DIV is editable, so just type in text and it will grow with it by width / height):

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