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

回答