在图像下方添加标题的最佳方法是什么？图像及其标题将向右浮动，并且标题上的文本需要换行 - 200x200px 的图像不应具有宽度为 800px 的标题。
我强烈希望有一个解决方案能够让我在不更改 CSS 或标记的情况下更新图像（具有不同的宽度）。
由于我无法控制的原因图像本身也会向右浮动，但这应该不会有太大问题。
图片代码是
<div class="floatright">
<img alt="foo" src="bar.png" height="490" border="0" width="800">
</div>
我可以根据需要用 HTML/CSS 包装它。这个页面没有JS。
figure {
display: table;
}
figcaption {
display: table-caption;
caption-side: bottom;
}<figure>
<img src="https://picsum.photos/200/50" />
<figcaption>This is a caption of slightly longer length. It should wrap, regardless of the size of the image.</figcaption>
</figure>
你可以替代figure and figcaption for div and p，或任何其他容器漂浮你的语义船。
无耻的插件：我在博客上讨论了这个问题并且我的解决方案在这里，如果你有兴趣的话。