html - 图像标题宽度与图像相同

Question

如何使图像标题宽度与图像相同？现在我有以下代码:

<div class="image">
    <img src="foo.jpg" alt="" />
    <div>This is the caption.</div>
</div>

我已经尝试了很多方法( float 、绝对定位等)，但如果标题很长，它总是会使 div 变宽而不是多行。问题是我不知道图像的宽度(或标题的长度)。是解决这个使用表的唯一方法吗？

Answer 1

所以问题是您不知道 img 的宽度，并且 img 的标题可能会超过 img 的宽度，在这种情况下您希望将标题的宽度限制为img.

在我的例子中，我在父元素上应用了 display:table，并应用了 display:table-caption 和 caption-side:bottom 在标题元素上是这样的:

<div class="image" style="display:table;">
    <img src="foo.jpg" alt="" />
    <div style="display:table-caption;caption-side:bottom;">This is the caption.</div>
</div>