Html 如何在段落中为图像添加标题<；p>；？

在过去的三个小时里，我一直在试图找出如何在段落中正确地添加标题浮动图像。我发现很多网站都有关于图片字幕的内容，但是没有一个网站是关于在段落中添加图片字幕的。这里的交易破坏者是无法在p>中包含除em>、strong>、img>等之外的元素。在段落中处理图像标题的最佳实践是什么

我准备了一份JSFIDLE：

多谢各位

使用的html：

    <h3>I want the red "kitten"-caption to be generated with html/css. (This one is in the image!)</h3>
<p>
 eginning of the paragraph, but the end-tag  is optional. Nevertheless, consistently including the end-tag is a good practice, and make certain types of automated processing easier. More importantly, it helps to make explicit 

    <img class="capimg" src="http://tinyurl.com/ppy7cuk" />    

exactly where your paragraph really ends, which may differ quite significantly from where you as an author would have it. The ambiguity arises from the fact that HTML prescribes quite rigidly which elements may nest inside other elements. The only things that    
</p>

我过去处理这个问题的方法是将图像包装在

中，并浮动该元素。您应该能够在图像后添加文本，但仍然在

中，不会出现问题

唯一需要注意的是，您需要指定

的宽度。由于您的图像可能会有所不同，我建议以内联方式执行此操作，将

设置为与图像的宽度相匹配

<span class="capimg" style="width:200px;">
    <img src="http://tinyurl.com/qzxz95c" />
    This is what I would consider in terms of captioning. It should handle pretty much any length of text.
</span>  

这就是我在字幕方面考虑的问题。它应该处理几乎任何长度的文本。

这看起来不错。非常感谢。但是我需要适应流体布局，因此使用img宽度的百分比值。-固定宽度不起作用。好的，我给了跨度33%，其中的img为100%，这似乎效果很好！非常感谢。

<span class="capimg" style="width:200px;">
    <img src="http://tinyurl.com/qzxz95c" />
    This is what I would consider in terms of captioning. It should handle pretty much any length of text.
</span>