alt text http://img190.imageshack.us/img190/7514/unbenanntax.jpgCome posizionare un IMG nell'angolo in basso a destra di un div
Questo è quello che voglio fare. Un div con del testo al suo interno e nell'angolo in basso a destra un img. L'altezza del div è stabile a 24px ma la lunghezza non è nota e potrebbero esserci più di una di queste div in fila.
Ci sono un paio di tecniche per farlo. La più semplice:
<div class="outer">
<img src="....">
</div>
con
div.outer { position: relative; height: 24px; }
div.outer img { position: absolute; right: 0; bottom: 0; }
Ora che prende fuori del flusso normale, che è un problema è che si desidera altri contenuti per avvolgere/galleggiante intorno ad esso. In questo caso hai davvero bisogno di conoscere l'altezza dell'immagine e poi applicare i trucchi appropriati a seconda di quello che hai.
Inizia con Making the absolute, relative.
Se l'immagine è alta 10 pixel, per esempio, si potrebbe provare questo:
div.outer { height: 24px; }
div.outer { float: right; margin-top: 14px; }
Naturalmente 14px 24px proviene da - 10px. Non so se soddisferà comunque ciò che stai cercando di ottenere.
so defenetly thx - circa il 1 ° codice - appena in basso: 0 con posizionamento corretto – bresleveloper
Non posso commentare la risposta di Cletus, ma ho dovuto aggiungere "px" a "right: 0; bottom: 0;" così è: a destra: 0px; fondo: 0px; Nel mio caso se metto qualcosa di diverso da '0' senza il suffisso' px' non funziona. – Jxadro
L'immagine di sfondo è la soluzione.
<div class="blarg" style="background:url(image.gif) bottom right no-repeat">Content</div>
Potrebbe essere necessario regolare imbottiture del div, anche, in modo il contenuto del div non si sovrappone la tua foto, se questo è necessario.
Se si desidera spostare il testo intorno all'immagine, entrambe le risposte sono errate. Entrambe faranno passare il testo direttamente sull'immagine. Ho cercato ore e nessuna risposta reale sembra esistere. This article spiega in modo più chiaro perché entrambe le risposte non funzioneranno se si tenta di avvolgere il testo.
+1 per l'immagine della vernice! –
Si potrebbe anche provare un 'background-image'. – Gumbo
Correlati: [Allega immagini su tutti e quattro gli angoli di DIV] (http://stackoverflow.com/questions/17306087/attach-images-on-all-four-corner-of-div) e [Modo intelligente per aggiungere l'immagine d'angolo al bordo DIV sui quattro angoli] (http://stackoverflow.com/questions/6467063/smart-way-to-add-corner-image-to-div-border-on-all-four-corners). –