posizione due div orizzontali uno accanto all'altro

su diversi progetti ho imparato due diversi metodi di posizionamento di due div orizzontali uno accanto all'altro. Uno è migliore dell'altro, o è solo una questione di gusto personale, o forse uno funziona solo per accidenza/pura fortuna?posizione due div orizzontali uno accanto all'altro

Metodo uno:

<div style="border:1px solid red;"> 
    <div style="float:left;"> 
     first 
    </div> 
    <div style="float:left;"> 
     second 
    </div> 
    <div style="clear:both;"> 
</div>

metodo in due:

<div style="border:1px solid green;"> 
    <div style="display:inline-block;"> 
     first 
    </div> 
    <div style="display:inline-block;"> 
     second 
    </div> 
</div>

fonte

2012-11-23 Michel

Il primo è più ampiamente supportato nei browser meno recenti, ma float di solito porta ad alcuni comportamenti strani (non male, niente che possa rompere il tuo disegno, solo un po 'inaspettato).

Ti allontanerai con inline-block solo per trovare qualcosa di rotto nel tuo progetto quando controlli un browser casuale più avanti nel ciclo di vita.

Io di solito uso con float e solo float.

fonte

2012-11-23 08:28:05 Ben

Come si gestiscono più di due div che devono essere allineati orizzontalmente? Forexample se ci sono tre div? Non c'è 'float: middle;' giusto? – Solace

@Zarah - sfortunatamente no 'float: middle;' (piccolo lol) e per tre div colonne di uguale altezza, dovrai google, ci sono molti approcci (complicati). Due div sono abbastanza semplici: http://stackoverflow.com/questions/4028833/two-divs-left-should-be-fixed-width-right-should-fill-rest-of-space/4031247#4031247, idea di base è usare un div float e un div regolare, metti un margine sul regular largo quanto il floated. – Ben

Grazie mille per la risposta. "L'idea di base è usare un div float e un div regolare, mettere un margine sul normale largo quanto il floated." - questo ha senso. Lo farò su Google. – Solace

Se si utilizza il secondo metodo, non è necessario utilizzare lo DIV se lo si trasforma in un elemento in linea. Basta usare un tag SPAN.

Quindi, se si sta tentando di allineare elementi/tag a livello di blocco, utilizzare il primo metodo.

fonte

2012-11-23 08:28:54

Buon punto, non ci ho pensato. Span comunque mi dà sempre un problema se voglio aggiungere padding/margin ... – Michel

Usa virgola mobile (Primo metodo). Perché supporta tutti i browser e è facile da gestire. Qui lo link puoi saperne di più

fonte

2012-11-23 08:32:55 Selvamani

Entrambi sono CSS validi che non funzionano per caso - dipende da ciò che ti serve.

Quando si utilizza float s, è necessario cancellarli (come nel codice pubblicato); quando si utilizza inline-block s, questo non è necessario. Inoltre, è possibile utilizzare text-align per allineare gli elementi inline-block, mentre non esiste lo float: middle. È inoltre possibile utilizzare la proprietà vertical-align per allineare le caselle come necessario.

Come altri hanno detto, ci sono alcuni problemi con inline-block, in particolare che IE meno recenti non lo supportano (molto) su elementi di blocco (si noti che funziona bene su elementi inline, come <span>). È possibile aggirare il problema con il seguente trucco:

.selector { 
    display: inline-block; 
    *display: inline; 
    zoom: 1; 
}

fonte

2012-11-23 08:35:36

posizione due div orizzontali uno accanto all'altro

risposta

Problemi correlati