div宽度与其第一个元素相同

Question

我有多个div并排。每个div包含一个图像，然后是图像下该图像的标题。如何使div的宽度与图像的宽度相同，因此图像下的文字不会拉伸div？

Answer 1

使用min-content作为宽度。

＆＃13;

＆＃13;

div {
  margin:1em;
  border:1px solid;
  width: -webkit-min-content;
  width: -moz-min-content;
  width: min-content;
}

＆＃13;

<div>
  <img src="http://placehold.it/200x100" alt="">
  An image.
</div>
<div>
  <img src="http://placehold.it/300x100" alt="">
  Another image.
</div>

＆＃13;

＆＃13;

＆＃13;