2012-05-30 14 views
5

Eventuali duplicati:
How do I get a div to float to the bottom of its container?Float un fondo arco proprio all'interno di un div

Ho questo codice a stare a galla un div al lato in basso a destra di un div. Ma la spanna rimane bloccata in alto a sinistra.

<div id="color_tile" class="select_tile" title="Choose color" style="background: grey; background-image: url(wallpaper/201_color_picker.jpg);" >  
    <span id="color_picker" style="visibility: visible; display: block; float: right; vertical-align: bottom;"></span> 
</div> 

C'è un modo diverso per posizionare l'intervallo?

+0

Dare al div una posizione relativa e lo span una posizione assoluta con fondo e destra impostati su zero. – j08691

+0

Chiarisci la tua domanda in quanto vuoi mantenere la portata in flusso con il resto degli articoli. Solo una soluzione equilibrata che riesco a trovare è ciò che hai già (meno allineamento verticale, che non ha senso), quindi probabilmente stai facendo qualcos'altro. – sg3s

+1

Vedi anche: [avvolgere il testo attorno a un div in basso a destra] (http://stackoverflow.com/questions/499829/css-wrap-text-around-a-bottom-right-div). – Phrogz

risposta

0

Vartical-align è molto particolare per recarsi al lavoro (che è il motivo per cui ho quasi mai usato)

D'arco: position:absolute; bottom:0; right:0;

e mettere un altezza/larghezza del div genitore e Sarà tutto pronto

+0

-1 Posizionare in modo assoluto l'elemento non gli permetterà di "fluttuare" (perché il contenuto lo avvolge). – Phrogz

+0

Se hai letto la domanda non c'è altro contenuto nel div. Vi sono anche due diverse richieste: "float a div in basso a destra" e "Esiste un modo diverso di posizionare lo span". Questo è risolvere il secondo, che è la vera domanda. Supponevo che il termine 'float' provenisse da' float: right' e non fosse la terminologia corretta in primo luogo su ciò che lui/lei volevo ottenere – locrizak

+0

Non si minimizzano le risposte che sono il risultato di una scarsa qualità delle domande. +1 – sg3s

5

Probabilmente dovresti separare correttamente l'HTML/CSS l'uno dall'altro.

Il codice potrebbe essere simile a questo

HTML:

<div> 
    <span>Absolute right bottom aligned to div...</span> 
</div> 

CSS:

div { position: relative; } 
div > span { position: absolute; right: 0; bottom: 0; } 

Ovviamente il tuo div dovrebbe avere una certa altezza/larghezza superiore a quella della campata, ma generalmente questo è un modo molto accettabile per farlo.

Questo non rende il contenuto del flusso "div" attorno all'ampiezza ma non è stato specificato chiaramente. Come detto, quello che hai dovrebbe funzionare in quel caso e se non lo è nel resto del tuo codice.

+1

Devi assolutamente separare il tuo CSS dal tuo HTML. –

Problemi correlati