Question

我花了三个小时试图弄清楚如何在段落中正确标题浮动图像。我发现很多网站都涉及字幕图像的任务，但是没有一个网站处理段落中的图像字幕。这里的交易破坏者是无法拥有除em＆gt;，strong＆gt;以外的元素，img＆gt;并且在p>内。在段落中处理图像标题的最佳做法是什么？

我准备了一个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>中并浮动该元素。您应该能够在图像之后添加文本，但仍然可以在<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>

如何在段落<p>？</p>中标题图像

1 个答案: