alt text http://img190.imageshack.us/img190/7514/unbenanntax.jpg¿Cómo realizar una img en la esquina inferior derecha de un div
Esto es lo que quiero hacer. Una div con algo de texto 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.
Existen algunas técnicas para hacer esto. El 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 lleva fuera del flujo normal, que es un problema es usted quiere otros contenidos para envolver/flotador alrededor de ella. En ese caso, realmente necesita saber la altura de la imagen y luego aplicar los trucos apropiados dependiendo de lo que tenga.
Comience con Making the absolute, relative.
Si la imagen es de 10 píxeles de alto, por ejemplo, usted podría intentar esto:
div.outer { height: 24px; }
div.outer { float: right; margin-top: 14px; }
Por supuesto 14px proviene de 24px - 10px. No sé si eso satisfará lo que intentas lograr sin embargo.
tan defenetly thx - sobre el 1er código - solo abajo: 0 con el posicionamiento correcto – bresleveloper
No puedo comentar la respuesta de Cletus, pero he tenido que agregar "px" a "right: 0; bottom: 0;" así es: correcto: 0px; abajo: 0px; En mi caso, si pongo algo diferente de '0' sin el sufijo' px', no funciona. – Jxadro
Imagen de fondo es su solución.
<div class="blarg" style="background:url(image.gif) bottom right no-repeat">Content</div>
Es posible que tenga que ajustar los acolchados de la div, también, así que el contenido del div no se solapa a su imagen, si esto es necesario.
Si desea hacer flotar el texto alrededor de la imagen, ambas respuestas son incorrectas. Ambos harán que el texto vaya directamente sobre la imagen. He estado buscando horas y no parece existir una respuesta real. This article explica con más claridad por qué ambas respuestas no funcionarán si estás intentando envolver el texto.
+1 para la imagen de pintura tha! –
También podría probar una 'background-image'. – Gumbo
Relacionados: [Adjuntar imágenes en las cuatro esquinas de DIV] (http://stackoverflow.com/questions/17306087/attach-images-on-all-four-corner-of-div) & [Forma inteligente de agregar imagen de esquina al borde DIV en las cuatro esquinas] (http://stackoverflow.com/questions/6467063/smart-way-to-add-corner-image-to-div-border-on-all-four-corners). –