Etiqueta Div dentro de la etiqueta img

Necesito agregar un texto en cada imagen y la galería de imágenes está construida usando etiquetas img. ¿No puedo agregar etiquetas div bajo etiquetas img? De manera similar a la que se muestra aquí:Etiqueta Div dentro de la etiqueta img

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

Aunque el div se añade a la etiqueta img, pero no puedo ver el texto "HELLO1_1" en la imagen.

¿Alguien me puede ayudar? Si necesita el código fuente, puedo compartirlo con usted.

Aquí está el enlace a probar el escenario: http://jsfiddle.net/XUR5K/9/

Fuente

2012-05-03 KashCSS

Tienes que hacerlo a la inversa. Ponga el img dentro de la etiqueta div en su lugar. – Eddy

Debe describir lo que desea lograr, en lugar de una solución asumida (que posiblemente no funcione). La gente ha hecho diferentes conjeturas sobre eso en sus respuestas. ¿Desea mostrar una leyenda debajo (o encima o aparte) de la imagen, o desea poner algún texto dentro (sobre) de la imagen, como un nombre en el mapa? Hay varias señales sobre esto en tu pregunta. –

Gracias Eddy. Invertí la jerarquía y funcionó. – KashCSS

Una etiqueta de imagen no puede tener elementos secundarios. En su lugar, debe colocar el DIV en la parte superior de la imagen usando CSS.

Ejemplo:

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

Eso es sólo un ejemplo. Hay muchas maneras de hacer esto.

Fuente

2012-05-03 05:02:45

Gracias a todos por sus respuestas. Cambié la jerarquía de div e img y funcionó. – KashCSS

El elemento img tiene una etiqueta de cierre automático, por lo que no puede darle elementos secundarios y esperar que funcione. Su modelo de contenido se define como vacío. Source.

sospecho que cualquier niño que especifique no se brindará porque un elemento img es un elemento reemplazado , como se menciona en la especificación W3C.

Fuente

2012-05-03 05:02:57 alex

-3

Reglas de buen tono.

Uso nula de origen en la etiqueta IMG.
Use CSS content: "" para los navegadores WebKit.
Insertar elemento a través de JavaScript. Borrar en HTML no tiene efecto.

También puede usar pseudo elementos.

Ejemplo: https://github.com/Alexei03a/canvas-img

Fuente

2012-12-13 11:51:27 user1835582

Etiqueta Div dentro de la etiqueta img

Respuesta

Cuestiones relacionadas