img标签内的Div标签

我需要在每个图像上添加一个文本，并使用img标签构建图像库。我不能在img标签下追加div标签。类似于这里显示的：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/

2012-05-03 KashCSS

你必须反过来做。将img放入div标签内。 – Eddy

你应该描述你想要完成的事情，而不是假设的解决方案（不可能工作）。人们对他们的答案做出了不同的猜测。您是否希望在图像下方（或上方或旁边）显示标题，或者是否希望在图像内部（上方）放置一些文字，如地图中的名称？在你的问题上有混合信号。 –

谢谢艾迪。我扭转了层次结构，它工作。 – KashCSS

的图像标签不能有子元素。相反，您需要使用CSS将DIV放置在图像顶部。

实施例：

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

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

2012-05-03 05:02:45

感谢大家的回答。我改变了div和img的层次结构，它工作。 – KashCSS

img元素有一个自闭标记，所以你不能给它的子元素，并期望它的工作。其内容模型定义为空。 Source。

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

2012-05-03 05:02:57 alex

-3

优雅的规则。

你也可以使用伪元素。

2012-12-13 11:51:27 user1835582

回答