image - img タグ内の div タグ

Question

各画像にテキストを追加する必要があり、img タグを使用して画像ギャラリーを作成しました。img タグの下に div タグを追加できませんか。ここに示すものと同様：

<img id="img1" class="img1_1" src="hello1_1">
  <div class="textDesc">HELLO1_1</div>
</img>

div は img tag に追加されていますが、画像に「HELLO1_1」というテキストが表示されません。

誰でも私を助けることができますか？ソースコードが必要な場合は、共有できます。

シナリオをテストするためのリンクは次のとおりです: http://jsfiddle.net/XUR5K/9/

score 15 · Accepted Answer

イメージタグに子要素を含めることはできません。代わりに、CSS を使用して画像の上に DIV を配置する必要があります。

例：

<div style="position: relative;">
    <img />
    <div style="position: absolute; top: 10px;">Text</div>
</div>

それはほんの一例です。これを行う方法はたくさんあります。

score 10 · Accepted Answer

要素にはimg自己終了タグがあるため、子要素を指定して機能することを期待することはできません。そのコンテンツモデルはemptyとして定義されています。ソース。

W3C仕様に記載されているように、img要素は置き換えられた要素であるため、指定した子はレンダリングされないと思われます。

3 に答える 3