Balise Div à l'intérieur de la balise img

J'ai besoin d'ajouter un texte sur chaque image et j'ai l'image de la galerie construits en utilisant les balises img. Ne puis-je pas ajouter des balises div sous les balises img. Semblable à celui montré ici :

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

Si la div est ajouté à la balise img , mais je ne peux pas voir le texte "HELLO1_1" sur l'image.

Svp quelqu'un peut m'aider?
Si vous avez besoin du code source, je peux le partager avec vous.

Voici le lien pour tester le scénario :
http://jsfiddle.net/XUR5K/9/

  • Vous devez le faire dans l'autre sens. Mettre l'img à l'intérieur de la balise div à la place.
  • Vous devez décrire ce que vous souhaitez accomplir, au lieu d'une hypothèse de solution (qui ne peut pas travailler). Les gens ont fait différent devine que, dans leurs réponses. Voulez-vous afficher une légende ci-dessous (ou au-dessus ou à côté) de l'image, ou voulez-vous placer un peu de texte à l'intérieur (sur) l'image, comme un nom dans la carte? Il y a des signaux mitigés sur cette dans votre question.
  • Merci À Eddy. J'ai inversé la hiérarchie et cela a fonctionné.
InformationsquelleAutor KashCSS | 2012-05-03
  1. 10

    Une balise d'image ne peut pas avoir des éléments d'enfant. Au lieu de cela, vous avez besoin de la position de la DIV en haut de l'image à l'aide de CSS.

    Exemple:

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

    C'est qu'un exemple. Il y a beaucoup de façons de le faire.

    • Merci à Tous pour vos réponses. J'ai changé la hiérarchie de la div et de l'img et ça a fonctionné.
    • Mais si l'image est centrée à l'intérieur de la mère div alors qu'il ne tient pas toute la largeur il ne s'aligne pas bien. Est-il une solution à cela?
    InformationsquelleAutor DA.
  2. 10

    La img élément a un auto balise de fermeture, de sorte que vous ne pouvez pas donner à l'enfant les éléments et espérer qu'il fonctionne. Son modèle de contenu est définie comme vide. Source.

    Je soupçonne tous les enfants que vous spécifiez ne sera pas rendu, car un img élément est un remplacé élément, tel que mentionné dans la spec W3C.

    InformationsquelleAutor alex
  3. -4

    Règles de bon ton.

    1. Utilisation null source dans la balise IMG.
    2. Utiliser les CSS contenu:"" pour les navigateurs WebKit.
    3. Insérer un élément à travers JavaScript. Clair dans le HTML n'a pas d'incidence.

    Vous pouvez également utiliser des pseudo-éléments.

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

    InformationsquelleAutor user1835582