Question

如果我的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>

Answer 1

<强> SOLUTION：

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

CODE SNIPPET

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>

进一步阅读：

Chen Hui Jing的

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

Sara Cope的

Display - 2015年3月16日

Answer 2

由于默认情况下div是块元素，因此您需要做的就是将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>

Answer 3

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

它非常自我解释，Width自动说明..它是自动的。内联块正在进行工作。它告诉它只是它的孩子的宽度。所以更多可以与它“内联”。

Answer 4

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

使div“拥抱”其包含的组件

4 个答案: