如何让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

使用神奇的css属性叫做“flex”，真的很神奇

yourDiv{
display:flex;
}

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