Come flottare una span in un div?

Sto cercando di imparare come utilizzare effettivamente i CSS senza l'aiuto di Bootstrap.Come flottare una span in un div?

Ho il seguente: (può essere vista qui: http://plnkr.co/edit/FTCft1YOfQ4xy7FKWEHE?p=preview)

<div class="block"> 
    <span class="pull-left">George</span> 
    <span class="pull-right">$23.20</span> 
</div> 

<div class="block"> 
    <span class="pull-left">Carl</span> 
    <span class="pull-right">$4.81</span> 
</div> 

<div class="block"> 
    <span class="pull-left">Steve</span> 
    <span class="pull-right">$0.34</span> 
</div>

e il CSS ...

.pull-left { 
    float: left; 
} 

.pull-right { 
    float: right; 
} 

.block { 
    display: block; /* since, div, I don't need this right ?*/ 
    background-color: #87CEEB; 
    width: 100%; 
}

Se stavo usando Bootstrap, ho potuto ottenere l'effetto desiderato, inserendo il mio html in un div container e invece di utilizzare la mia classe personalizzata di block, aggiungere la classe btn e btn-block.

Voglio che i nomi siano allineati verticalmente a sinistra e che i prezzi siano allineati verticalmente a destra. Cosa mi manca?

Un po 'come:

George          $23.20 
Carl          $4.81 
Steve          $0.34

prega di non citare le tabelle, come ho detto, ho potuto utilizzare bootstrap e avvolgere il sopra html in div.container, e quindi utilizzare button.btn.btn-block invece del mio div.block per ottenere l'esatto stesso effetto. Grazie.

Update 1:

OK, non mi aspettavo che ci sia più di uno o forse due soluzioni, ma c'è un bel po '. Qualcuno può spiegare i pro/contro di ciascuna soluzione? Sono davvero in perdita qui.

Soluzione # 1:

Aggiungi un new div element:

<div class="block"> 
    <span class="pull-left">George</span> 
    <span class="pull-right">$23.20</span> 
    <div style='clear:both'></div> 
</div>

Soluzione # 2:

Aggiungere clear:both; overflow:auto; alla classe block da thgaskel

Soluzione n. 3:

Questo sembra creare margini tra i blocchi.

Changedisplay:block a display:inline-block per la classe block.

Soluzione # 4:

Addfloat:left alla classe block.

Soluzione # 5:

scoperto questo uno mentre nei guai.Creare un nuovo selettore:

.block:after { 
    content: ":" /* <--- at a complete loss why this works */ 
}

Soluzione # 6:

scoperto questo uno dalla lettura this page.

.block:after { 
    content:""; 
    display: table; 
    clear: both; 
}

Mi sento piuttosto sopraffatto e non sono sicuro di quale scegliere. Grazie.

fonte

2013-07-30 JP Richardson

Invece di display: block;, usate la seguente css

.block { 
display: inline-block; //change like this 
background-color: #87CEEB; 
width: 100%; 
}

Aggiornamento: Dato che la differenza è distrubing, meglio usare

.block { 
    display: block; 
    float: left; 
    background-color: #87CEEB; 
    width: 100%; 
}

Actaully inline-block tende a lasciare spazio che può essere impedito in molti modi.

Anche questo risolve il problema, controllare jsfiddle

fonte

2013-07-30 04:29:42 Praveen

Ma il 'btn-block' in Bootstrap ha un' display: block '? –

Funziona, ma non capisco perché questo pone un margine tra i blocchi mentre le altre soluzioni no? –

@JPRichardson Non penso a pro e contro nell'applicare il css. L'unica cosa che vorrei dire, non dovrebbe influenzare altri stili nel tuo in html. – Praveen

Vi sono vicino nel vostro approccio, l'unica cosa che sarà necessario fare per rendere questo lavoro è quello di cancella il float dopo che è stato applicato allo span.

Avere uno sguardo a come clear opere in HTML/CSS: http://www.w3schools.com/cssref/pr_class_clear.asp

il codice HTML sarebbe simile a questa:

<!DOCTYPE html> 
<html> 

    <head> 
    <link rel="stylesheet" href="style.css"> 
    </head> 

    <body> 
    <div class="block"> 
     <span class="pull-left">George</span> 
     <span class="pull-right">$23.20</span> 
     <div style='clear:both'></div> 
    </div> 

    <div class="block"> 
    <span class="pull-left">Carl</span> 
    <span class="pull-right">$4.81</span> 
    <div style='clear:both'></div> 
    </div> 

    <div class="block"> 
    <span class="pull-left">Steve</span> 
    <span class="pull-right">$0.34</span> 
    <div style='clear:both'></div> 
    </div> 


    </body> 

</html>

fonte

2013-07-30 04:29:45 JanR

lol ok, annotato :) – JanR

Si potrebbe anche solo applicare 'clear: both; overflow: auto; 'alla classe' .block'. – thgaskell

Jeeze, sooo molte soluzioni che sembrano funzionare ... Io davvero non conosco i pro/contro di ciascuno. –

Aggiungi float:left; a .block classe sin dal suo bambino sono galleggianti per questo che è necessario fluttua il suo genitore div per ottenere l'intera larghezza

.block { 
    display: block; /* since, div, I don't need this right ?*/ 
    background-color: #87CEEB; 
    width: 100%; 
    float:left; 
}

fonte

2013-07-30 04:33:10 Hushme

bene vedrai la differenza dopo aver aggiunto i tag .. :) – zzlalani

Come flottare una span in un div?

risposta

Problemi correlati