Image img标签中的Div标签

我需要在每个图像上添加一个文本，并使用img标记构建图像库。我不能在img标记下附加div标记。与此处所示类似：

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

你好

虽然div被附加到img标签上，但我在图像上看不到文本“HELLO1_1”

有人能帮我吗？ 如果你需要源代码，我可以与你分享

以下是测试场景的链接：

---

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

例如：

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

正文

---

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

img元素有一个自动关闭标记，因此您不能给它子元素并期望它工作。其内容模型定义为空

我怀疑您指定的任何子元素都不会被渲染，因为

img

元素是被替换的元素，如W3C规范中所述。

良好色调规则

在IMG标记中使用空源

对WebKit浏览器使用CSS内容：“”

通过JavaScript插入元素在HTML中清除不会影响。

也可以使用伪元素

---

示例：

你必须反过来做。将img放在div标签中。您应该描述您希望实现的目标，而不是假设的解决方案（不可能实现）。人们在回答中对此做出了不同的猜测。您希望在图像下方（或上方或旁边）显示标题，还是希望在图像内部（上方）放置一些文字，如地图中的名称？在你的问题中，关于这一点有多种信号。谢谢艾迪。我改变了等级制度，它成功了。谢谢大家的回答。我改变了div和img的层次结构，效果很好。但是如果图像在父

div

中居中，而它不能保持其整个宽度，它将无法很好地对齐。有什么解决办法吗？@Royi确实，他们有一些选项，比如现在只使用CSS的图像匹配，而你无法知道图像的边界。如果它允许子对象（例如标题），则可以将它们与生成的（通过拟合操作）图像对齐bounds@GeorgeBirbilis，你能举个例子吗？@Royi我的意思是-你怎么知道它与图像的准确位置，这样你就可以在它下面放置一个标题，使其与图像边缘左对齐？