Una soluzione comune a questo problema utilizza il posizionamento assoluto o i float ritagliati, ma questi sono difficili in quanto richiedono una messa a punto estesa se le colonne cambiano in numero + dimensioni e che è necessario assicurarsi che la colonna "principale" sia sempre la più lunga. Invece, suggerirei di utilizzare una delle tre soluzioni più robuste:
display: flex: di gran lunga la soluzione più semplice e migliore e molto flessibile - ma non supportata da IE9 e precedenti.tableoppure display: table: molto semplice, molto compatibile (praticamente tutti i browser di sempre), abbastanza flessibile.display: inline-block; width:50% con un margine negativo: abbastanza semplice, ma i bordi in fondo alla colonna sono un po 'complicati.
1. display:flex
Questo è davvero semplice ed è facile adattarsi a layout più complessi o più dettagliati, ma flexbox è supportato solo da IE10 o versioni successive (oltre ad altri browser moderni).
Esempio: http://output.jsbin.com/hetunujuma/1
HTML pertinente:
<div class="parent"><div>column 1</div><div>column 2</div></div>
Css rilevanti:
.parent { display: -ms-flex; display: -webkit-flex; display: flex; }
.parent>div { flex:1; }
Flexbox supporta molte più opzioni, ma per avere semplicemente un numero qualsiasi di colonne è sufficiente quanto sopra!
2. <table>odisplay: table
Un modo semplice ed estremamente compatibile per farlo è usare un table- ti consiglio di provarlo prima se hai bisogno del supporto vecchio IE . Hai a che fare con le colonne; divs + float semplicemente non sono il modo migliore per farlo (per non parlare del fatto che più livelli di div nidificati solo per aggirare le limitazioni CSS non è quasi più "semantico" rispetto al semplice utilizzo di una semplice tabella). Se non si desidera utilizzare l' tableelemento, considerare cssdisplay: table (non supportato da IE7 e precedenti).
Esempio: http://jsfiddle.net/emn13/7FFp3/
HTML pertinente: (ma considera invece l'uso di un semplice<table>)
<div class="parent"><div>column 1</div><div>column 2</div></div>
Css rilevanti:
.parent { display: table; }
.parent > div {display: table-cell; width:50%; }
/*omit width:50% for auto-scaled column widths*/
Questo approccio è molto più robusto rispetto all'utilizzo overflow:hiddencon i float. Puoi aggiungere praticamente qualsiasi numero di colonne; puoi farli ridimensionare automaticamente se vuoi; e mantieni la compatibilità con i browser antichi. A differenza della soluzione float richiesta, non è nemmeno necessario sapere in anticipo quale colonna è la più lunga; l'altezza si adatta bene.
BACIO: non usare hack float a meno che non sia necessario. Se IE7 è un problema, sceglierei comunque una semplice tabella con colonne semantiche su una soluzione trucco-CSS difficile da mantenere e meno flessibile ogni giorno.
A proposito, se hai bisogno che il tuo layout sia reattivo (es. Nessuna colonna su piccoli telefoni cellulari) puoi usare una @mediaquery per tornare al layout a blocchi semplici per schermi di piccole dimensioni - funziona sia che tu usi <table>o con qualsiasi altro display: tableelemento.
3. display:inline blockcon un margine negativo hack.
Un'altra alternativa è usare display:inline block.
Esempio: http://jsbin.com/ovuqes/2/edit
HTML pertinente: (l'assenza di spazi tra idivtag è significativa!)
<div class="parent"><div><div>column 1</div></div><div><div>column 2</div></div></div>
Css rilevanti:
.parent {
position: relative; width: 100%; white-space: nowrap; overflow: hidden;
}
.parent>div {
display:inline-block; width:50%; white-space:normal; vertical-align:top;
}
.parent>div>div {
padding-bottom: 32768px; margin-bottom: -32768px;
}
Questo è leggermente complicato e il margine negativo significa che il "vero" fondo delle colonne è oscurato. Questo a sua volta significa che non puoi posizionare nulla rispetto alla parte inferiore di quelle colonne perché è tagliato da overflow: hidden. Nota che oltre ai blocchi inline, puoi ottenere un effetto simile con i float.
TL; DR : utilizzare flexbox se è possibile ignorare IE9 e precedenti; altrimenti prova una tabella (css). Se nessuna di queste opzioni funziona per te, ci sono hack di margine negativo, ma questi possono causare strani problemi di visualizzazione che sono facili da perdere durante lo sviluppo e ci sono limitazioni di layout di cui devi essere consapevole.