alt text http://img190.imageshack.us/img190/7514/unbenanntax.jpgComment placer un img dans le coin inférieur droit d'une div
Voici ce que je veux faire. Une Div avec un peu de texte et dans le coin en bas à droite un img. La hauteur de la div est stable à 24px mais la longueur n'est pas connue et il pourrait y avoir plus d'un de ces divs dans une rangée.
Il existe plusieurs techniques pour cela. Le plus simple:
<div class="outer">
<img src="....">
</div>
avec
div.outer { position: relative; height: 24px; }
div.outer img { position: absolute; right: 0; bottom: 0; }
Maintenant que prend hors du flux normal, ce qui est un problème que vous voulez tout autre contenu pour envelopper/flottant autour d'elle. Dans ce cas, vous devez vraiment connaître la hauteur de l'image, puis appliquer les astuces appropriées en fonction de ce que vous avez.
Commencez par Making the absolute, relative.
Si l'image est de 10 pixels de haut, par exemple, vous pouvez essayer ceci:
div.outer { height: 24px; }
div.outer { float: right; margin-top: 14px; }
Bien sûr 14px vient de 24px - 10px. Je ne sais pas si cela va satisfaire ce que vous essayez d'atteindre cependant.
ainsi defenetly thx - sur le 1er code - juste en bas: 0 avec le bon positionnement – bresleveloper
Je ne peux pas commenter la réponse de Cletus, mais j'ai dû ajouter "px" à "right: 0; bottom: 0;" donc c'est: à droite: 0px; en bas: 0px; Dans mon cas, si je mets quelque chose de différent de «0» sans le suffixe «px» cela ne fonctionne pas. – Jxadro
L'image de fond est votre solution.
<div class="blarg" style="background:url(image.gif) bottom right no-repeat">Content</div>
Vous devrez peut-être ajuster rembourrages de la div, aussi, de sorte que le contenu de la div ne se chevauchent pas votre image, si cela est nécessaire.
Si vous souhaitez faire flotter le texte autour de l'image, ces deux réponses sont erronées. Les deux feront le texte aller droit sur l'image. J'ai cherché des heures et aucune vraie réponse semble exister. This article explique plus clairement pourquoi ces deux réponses ne fonctionneront pas si vous essayez d'envelopper le texte.
+1 pour l'image de peinture! –
Vous pouvez également essayer 'background-image'. – Gumbo
En relation: [Joindre des images aux quatre coins de DIV] (http://stackoverflow.com/questions/17306087/attach-images-on-all-four-corner-of-div) & [Une manière intelligente d'ajouter une image de coin à la frontière DIV sur les quatre coins] (http://stackoverflow.com/questions/6467063/smart-way-to-add-corner-image-to-div-border-on-all-four-corners). –