html - 图片说明和包装

Question

在图片下方添加说明的最佳方式是什么？图片及其标题将向右浮动，标题上的文本需要换行——200x200 像素的图片不应该有宽度为 800 像素的标题。

我非常希望有一种解决方案允许我在不更改 CSS 或标记的情况下更新图像(具有不同宽度)。

由于我无法控制的原因，图像本身也会向右浮动，但这应该不会有太大问题。

---

图片代码为

<div class="floatright">
  <img alt="foo" src="bar.png" height="490" border="0" width="800">
</div>

我可以根据需要用 HTML/CSS 包装它。此页面上没有 JS。

Answer 1

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 和 figcaption 替换 div 和 p，或者任何其他容器让您的语义船漂浮.

无耻插件:我在博客上写了这个问题和my solution here ，如果您有兴趣的话。