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

时间:2016-06-28 23:17:05

标签: html css

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

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

有没有办法使用CSS,以便divfigure的宽度只有大到足以包含图像和标题?我想在两者周围放一个矩形边框,但我不想猜测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>

4 个答案:

答案 0 :(得分:5)

<强> 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日

答案 1 :(得分: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>

答案 2 :(得分:1)

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

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

答案 3 :(得分:0)

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