图像标题和包装 [英] Image captions and wrapping

问题描述

在图片下方添加标题的最佳方法是什么？图像及其标题将正确地浮动，并且标题上的文本需要包装 - 200x200像素的图像不应包含宽度为800px的标题。

What's the best way to add a caption below an image? The image and its caption will be floated right, and the text on the caption needs to wrap -- a 200x200px image shouldn't have a caption of width 800px.

I我强烈希望能够在不更改CSS或标记的情况下更新图片（不同宽度）的解决方案。

I would strongly prefer a solution that allows me to update images (with different widths) without changing the CSS or markup.

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

For reasons beyond my control the image itself will also be floated right, but this should not be too problematic.

图像代码是

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

我可以根据需要用HTML / CSS封装它。在这个页面上没有JS。

and I can wrap this with HTML/CSS as needed. No JS on this page.

推荐答案

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 ，或者任何其他容器浮在你的语义船上。

You can substitute figure and figcaption for div and p, or whatever other containers float your semantic boat.

无耻插件： 我的解决方案 ，如果您有兴趣。

Shameless plug: I blogged about this problem and my solution here, if you're interested.

这篇关于图像标题和包装的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！