关于html：使div“拥抱”其包含的组件

making a div “hug” its contained components

本问题已经有最佳答案，请猛点这里访问。

如果我有这样的HTML：

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

有没有一种使用CSS的方法，使类为figure的div的宽度仅足以包含图像和标题？我想在两边都加上一个矩形边框，但我不想猜测以像素为单位的DIV的宽度。

下面的例子(div.figure有一个宽度，似乎扩展以填充其可用宽度)

1
2
3

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

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

解决方案：

是块级元素(与html5图标记相同)。所以需要指定一个内联块行为，将CSS属性display: inline-block;添加到您的图中。

代码片段：

1
2
3
4

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

进一步阅读：

你对CSS显示有多了解？陈慧静-2016年6月18日

Sara Cope展示-2015年3月16日

相关讨论

由于div在默认情况下是块元素，所以只需将display: inline-block;添加到div.figure中即可。像这样：

1
2
3
4

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

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

1
2
3
4
5

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

不过，它很自然，宽度自动声明。它是自动的。不过，内联块正在进行这项工作。它告诉它只能是其子级的宽度。所以更多的可以与它"内联"。