如何使图像标题宽度与图像相同？现在我有以下代码：
<div class="image">
<img src="foo.jpg" alt="" />
<div>This is the caption.</div>
</div>
我已经尝试了很多东西(浮动,绝对定位等),但是如果标题很长,它总是使div变宽,而不是进行多行.问题是我不知道图像的宽度(或字幕长度).是解决这个使用表的唯一方法吗？
解决方法
所以问题是你不知道img会有多宽,而img的标题可能会超出img的宽度,在这种情况下,你想限制字幕的宽度到img的宽度.
在我的情况下,我在父元素上应用了display：table,并在caption元素上应用了显示：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>
