使 div “拥抱”其包含的组件[重复]答案

【问题标题】：making a div "hug" its contained components [duplicate]使 div “拥抱”其包含的组件[重复]
【发布时间】：2016-10-31 11:08:36
【问题描述】：

如果我的 HTML 看起来像这样：

<div class="figure">
  <img src="some_image.png" />
  <div><span class="caption">Fig. 1: Some caption</span></div>
</div>

有没有办法使用 CSS 以使 div 类 figure 的宽度仅足以包含图像和标题？我想在两者周围放置一个矩形边框，但我不想猜测 div 的宽度（以像素为单位）。

下面的示例（div.figure 的宽度似乎会扩大以填充其可用宽度）

div.figure { 
  border: 1px solid black; 
}

<div class="figure">
<img src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo-med.png?v=6f86a5fa447f" />
<div><span class="caption">Fig. 1: Some caption</span></div>
</div>

【问题讨论】：

标签： html css

【解决方案1】：

解决方案：

<div> 是块级元素（与 HTML5 图形标签相同）。因此，您需要指定您想要的内联块行为，将 css 属性 display: inline-block; 添加到您的图形中。

代码片段：

figure {
  border: 1px inset tomato;
  display: inline-block;
}

<figure>
  <img src="http://placehold.it/300x300" alt="my-photo"/>
  <figcaption>
    Fig. 1: Some caption
  </figcaption>
</figure>

进一步阅读：

How well do you know CSS display? 陈慧静 - 2016 年 6 月 18 日

Display Sara Cope - 2015 年 3 月 16 日

【讨论】：

另一个选项是display: table +1

【解决方案2】：

由于divs 默认是块元素，所以您只需将display: inline-block; 添加到div.figure。像这样：

div.figure { 
  border: 1px solid black;
  display: inline-block;
}

<div class="figure">
<img src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo-med.png?v=6f86a5fa447f" />
<div><span class="caption">Fig. 1: Some caption</span></div>
</div>

【讨论】：

【解决方案3】：

.figure {
  border: 1px solid #000;
  width: auto;
  display: inline-block;
}

虽然它非常自我解释，但宽度自动状态..它是自动的。内联块正在做这项工作。它告诉它只是它的孩子的宽度。所以更多的东西可以与它“内联”。

【讨论】：

如果不放width: auto，默认宽度是多少？
对于 inline-block 元素，默认宽度是自动的，所以你不需要指定它，div 将被放置在彼此旁边，直到它们不再水平放置并会分成另一行。对于块级元素，默认宽度为 100%，div 将垂直排列。

【解决方案4】：

另一种简单的方法是简单地添加float: left，它将div 浮动在它附近的元素旁边。 float 也使得 div 的宽度与其内容一样宽（除非另有说明）。

【讨论】：