1

私は過去 3 時間かけて、パラグラフ内のフロート画像に適切なキャプションを付ける方法を見つけようとしました。画像にキャプションを付けるタスクを扱っている Web サイトを多数見つけましたが、段落内の画像にキャプションを付ける作業を扱っている Web サイトはありませんでした。ここで問題になるのは、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%;
}
4

1 に答える 1

2

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>
于 2013-09-28T20:16:59.403 に答える