img 标签内的 div 标签答案

【问题标题】：Div tag within img tagimg 标签内的 div 标签
【发布时间】：2012-05-12 14:43:51
【问题描述】：

我需要在每个图像上添加一个文本，并且我有使用 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/

【问题讨论】：

你必须反其道而行之。将 img 放在 div 标签内。
您应该描述您希望完成的任务，而不是假设的解决方案（这可能行不通）。人们在答案中对此做出了不同的猜测。您希望在图像下方（或上方或旁边）显示标题，还是希望在图像内部（上方）放置一些文本，例如地图中的名称？您的问题对此有不同的信号。
谢谢艾迪。我颠倒了层次结构，它起作用了。

【解决方案1】：

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

例子：

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

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

【讨论】：

感谢大家的回答。我改变了 div 和 img 的层次结构，它起作用了。
但是如果图像在父div 内居中，而它没有保持其整个宽度，则它不会很好地对齐。有解决办法吗？
@Royi 事实上，他们现在只使用 CSS 就可以选择图像调整，而且你无法知道图像的边界。如果它允许孩子（例如标题），您就可以将它们与结果（来自拟合操作）图像边界对齐
@GeorgeBirbilis，你能举个例子吗？
@Royi 我的意思是w3schools.com/css/css3_object-fit.asp - 你怎么知道它正好适合图像的位置，以便你可以在它下面放置一个与图像边缘左对齐的标题？

【解决方案2】：

img 元素有一个自结束标签，所以你不能给它子元素并期望它工作。它的内容模型被定义为empty。 Source.

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

【讨论】：

【解决方案3】：

好语气的规则。

你也可以使用伪元素。

【讨论】：