html - figcaption - Cómo colocar un img en la esquina inferior derecha de un div

img html url

Question

texto alt http://img190.imageshack.us/img190/7514/unbenanntax.jpg

Esto es lo que quiero hacer. Un Div con algún texto en él y en la esquina inferior derecha un img. La altura del div es estable a 24px pero la longitud no se conoce y podría haber más de uno de estos divs en una fila.

Answer 1

Hay un par de técnicas para hacer esto. Lo más simple:

<div class="outer">
<img src="....">
</div>

con

div.outer { position: relative; height: 24px; }
div.outer img { position: absolute; right: 0; bottom: 0; }

Ahora que lo saca del flujo normal, lo que es un problema es que desea que otro contenido se ajuste / flote a su alrededor. En ese caso, realmente necesita saber la altura de la imagen y luego aplicar los trucos adecuados en función de lo que tenga.

Comience con Hacer lo absoluto, relativo .

Si la imagen tiene 10 píxeles de alto, por ejemplo, puedes intentar esto:

div.outer { height: 24px; }
div.outer { float: right; margin-top: 14px; }

Por supuesto, 14px viene de 24px - 10px. No sé si eso satisfará lo que estás tratando de lograr, sin embargo.

Answer 2

La imagen de fondo es tu solución.

<div class="blarg" style="background:url(image.gif) bottom right no-repeat">Content</div>

Es posible que también deba ajustar los rellenos del div, de modo que el contenido del div no se superponga a su imagen, si es necesario.

Answer 3

Si desea hacer flotar el texto alrededor de la imagen, ambas respuestas son incorrectas. Ambos harán que el texto pase directamente sobre la imagen. He estado buscando por horas y ninguna respuesta real parece existir. Este artículo explica más claramente por qué ambas respuestas no funcionarán si intenta envolver el texto.