img标签内的Div标签

Question

我需要在每个图像上添加一个文本,我使用img标签构建图像库.我不能在img标签下添加div标签.与此处显示的类似:

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

虽然div附加到img标签,但我无法在图像上看到文本"HELLO1_1".

请有人帮帮我吗？如果您需要源代码,我可以与您分享.

以下是测试场景的链接:http: //jsfiddle.net/XUR5K/9/

Answer 1

图像标记不能包含子元素.相反,您需要使用CSS将DIV放在图像顶部.

例:

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

这只是一个例子.有很多方法可以做到这一点.

Answer 2

该img元素具有自闭合标记,因此您无法为其提供子元素并期望它可以工作.其内容模型定义为空.来源.

我怀疑你指定的任何子项都不会被渲染,因为img元素是替换元素,如W3C规范中所述.