html - 如何在段落 中为图像添加标题？

Question

在过去的三个小时里，我一直在研究如何正确地为段落内的 float 图像添加标题。我发现许多网站都涵盖了为图像添加字幕的任务，但没有一个网站涉及为段落中的图像添加字幕。这里的交易破坏者无法在 p> 中包含 em>、strong>、img> 等元素。在段落中处理图像说明的最佳做法是什么？

我准备了一个jsfiddle:http://jsfiddle.net/cm94k/

谢谢

使用的 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>

使用的CSS:

p {
    -moz-column-count:3; /* Firefox */
    -webkit-column-count:3; /* Safari and Chrome */
    column-count:3;
    -moz-column-gap:2em; /* Firefox */
    -webkit-column-gap:2em; /* Safari and Chrome */
    column-gap:2em;

}

.capimg {
    float: left;
    width: 33%;
}

Answer 1

http://jsfiddle.net/QxqL4/6/

我过去处理这个问题的方法是将图像包装在 <span> 中并 float 该元素。您应该能够在图像后添加文本，但仍在 <span> 内没有问题。

唯一需要注意的是您需要指定 <span> 的宽度.由于您的图像可能会有所不同，我建议您内联执行此操作，设置 <span>与图像的宽度相匹配。

<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>