如何使图像标题宽度与图像相同?现在我有以下代码:
<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>