Div Tag Within Img Tag
I need to add a text on each of the image and I have the image gallery constructed using img tags. Can't I append div tags under img tags. Similar to the one shown here : ![]()
Solution 1:
An image tag can not have child elements. Instead, you need to position the DIV on top of the image using CSS.
Example:
<div style="position: relative;">
<img />
<div style="position: absolute; top: 10px;">Text</div>
</div>
That's but one example. There's plenty of ways to do this.
Solution 2:
The img element has a self closing tag, so you can't give it child elements and expect it to work. Its content model is defined as empty. Source.
I suspect any children you specify won't be rendered because an img element is a replaced element, as mentioned in the W3C spec.
Solution 3:
Rules of good tone.
- Use null source in IMG tag.
- Use CSS content:"" for WebKit browsers.
- Insert element through JavaScript. Clear in HTML does not affect.
Also you can use pseudo elements.
Post a Comment for "Div Tag Within Img Tag"