图片标题和包装

Question

在图像下方添加标题的最佳方法是什么？图像及其标题将向右浮动,标题上的文字需要换行 - 一个200x200px的图像不应该有宽度为800px的标题.

我非常喜欢一种允许我更新图像(具有不同宽度)而无需更改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="http://lorempixel.com/300/100/" />
  <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,或任何其他容器的浮动船语义.

无耻的插件:如果你有兴趣,我在这里写了关于这个问题和我的解决方案的博客.