Eine übliche Lösung für dieses Problem verwendet die absolute Positionierung oder zugeschnittene Floats. Diese sind jedoch insofern schwierig, als sie eine umfassende Optimierung erfordern, wenn sich Ihre Spalten in Anzahl + Größe ändern, und dass Sie sicherstellen müssen, dass Ihre "Hauptsäule" immer die längste ist. Stattdessen würde ich vorschlagen, dass Sie eine von drei robusteren Lösungen verwenden:
display: flex: bei weitem die einfachste und beste Lösung und sehr flexibel - aber von IE9 und älter nicht unterstützt.tableoder display: table: sehr einfach, sehr kompatibel (so ziemlich jeder Browser), ziemlich flexibel.display: inline-block; width:50% mit einem negativen Rand-Hack: recht einfach, aber die Ränder am unteren Ende der Spalte sind etwas knifflig.
1. display:flex
Dies ist sehr einfach und lässt sich leicht an komplexere oder detailliertere Layouts anpassen. Flexbox wird jedoch nur von IE10 oder höher (zusätzlich zu anderen modernen Browsern) unterstützt.
Beispiel: http://output.jsbin.com/hetunujuma/1
Relevantes HTML:
<div class="parent"><div>column 1</div><div>column 2</div></div>
Relevante CSS:
.parent { display: -ms-flex; display: -webkit-flex; display: flex; }
.parent>div { flex:1; }
Flexbox unterstützt viel mehr Optionen, aber um einfach eine beliebige Anzahl von Spalten zu haben, reicht das oben Genannte aus!
2. <table>oderdisplay: table
Eine einfache und äußerst kompatible Möglichkeit, dies zu tun, ist die Verwendung von a table- ich würde empfehlen, dass Sie dies zuerst versuchen, wenn Sie Unterstützung für alte IE benötigen . Sie haben es mit Spalten zu tun; divs + floats sind einfach nicht der beste Weg, dies zu tun (ganz zu schweigen von der Tatsache, dass mehrere Ebenen verschachtelter divs, nur um CSS-Einschränkungen zu umgehen, kaum "semantischer" sind als nur die Verwendung einer einfachen Tabelle). Wenn Sie das tableElement nicht verwenden möchten , ziehen Sie CSS in Betrachtdisplay: table (von IE7 und älter nicht unterstützt).
Beispiel: http://jsfiddle.net/emn13/7FFp3/
Relevantes HTML: (aber erwägen Sie<table>stattdessen dieVerwendung einer Ebene)
<div class="parent"><div>column 1</div><div>column 2</div></div>
Relevante CSS:
.parent { display: table; }
.parent > div {display: table-cell; width:50%; }
/*omit width:50% for auto-scaled column widths*/
Dieser Ansatz ist weitaus robuster als die Verwendung overflow:hiddenmit Floats. Sie können so ziemlich eine beliebige Anzahl von Spalten hinzufügen. Sie können sie automatisch skalieren lassen, wenn Sie möchten. und Sie behalten die Kompatibilität mit alten Browsern. Im Gegensatz zur Float-Lösung müssen Sie auch nicht vorher wissen, welche Spalte am längsten ist. Die Höhe skaliert ganz gut.
KISS: Verwenden Sie keine Float-Hacks, es sei denn, Sie müssen dies ausdrücklich tun. Wenn IE7 ein Problem darstellt, würde ich jeden Tag eine einfache Tabelle mit semantischen Spalten über einer schwer zu wartenden, weniger flexiblen Trick-CSS-Lösung auswählen.
Übrigens, wenn Sie möchten, dass Ihr Layout reagiert (z. B. keine Spalten auf kleinen Mobiltelefonen), können Sie mithilfe einer @mediaAbfrage auf das einfache Blocklayout für kleine Bildschirmbreiten zurückgreifen - dies funktioniert unabhängig davon, ob Sie es verwenden <table>oder nichtdisplay: table Element verwenden.
3. display:inline blockmit einem negativen Margin Hack.
Eine andere Alternative ist zu verwenden display:inline block.
Beispiel: http://jsbin.com/ovuqes/2/edit
Relevantes HTML: (Das Fehlen von Leerzeichen zwischen dendivTags ist signifikant!)
<div class="parent"><div><div>column 1</div></div><div><div>column 2</div></div></div>
Relevante CSS:
.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;
}
Dies ist etwas schwierig und der negative Rand bedeutet, dass der "wahre" Boden der Spalten verdeckt ist. Dies bedeutet wiederum, dass Sie nichts relativ zum unteren Rand dieser Spalten positionieren können, da dies durch abgeschnitten wird overflow: hidden. Beachten Sie, dass Sie zusätzlich zu Inline-Blöcken mit Floats einen ähnlichen Effekt erzielen können.
TL; DR : Verwenden Sie Flexbox, wenn Sie IE9 und älter ignorieren können. Andernfalls versuchen Sie es mit einer (CSS-) Tabelle. Wenn keine dieser Optionen für Sie funktioniert, gibt es Hacks mit negativen Margen, die jedoch zu seltsamen Anzeigeproblemen führen können, die während der Entwicklung leicht übersehen werden können, und es gibt Layoutbeschränkungen, die Sie beachten müssen.