Solusi umum untuk masalah ini menggunakan penentuan posisi absolut atau float yang dipangkas, tetapi ini rumit karena membutuhkan penyetelan yang luas jika kolom Anda berubah dalam jumlah + ukuran, dan Anda perlu memastikan kolom "utama" Anda selalu yang terpanjang. Sebaliknya, saya sarankan Anda menggunakan salah satu dari tiga solusi yang lebih kuat:
display: flex: sejauh ini solusi paling sederhana & terbaik dan sangat fleksibel - tetapi tidak didukung oleh IE9 dan yang lebih lama.tableatau display: table: sangat sederhana, sangat kompatibel (hampir semua browser yang pernah ada), cukup fleksibel.display: inline-block; width:50% dengan hack margin negatif: cukup sederhana, tetapi batas kolom-bawah sedikit rumit.
1. display:flex
Ini sangat sederhana, dan mudah untuk beradaptasi dengan tata letak yang lebih kompleks atau lebih detail - tetapi flexbox hanya didukung oleh IE10 atau yang lebih baru (di samping browser modern lainnya).
Contoh: http://output.jsbin.com/hetunujuma/1
Html yang relevan:
<div class="parent"><div>column 1</div><div>column 2</div></div>
Css yang relevan:
.parent { display: -ms-flex; display: -webkit-flex; display: flex; }
.parent>div { flex:1; }
Flexbox memiliki dukungan untuk lebih banyak opsi, tetapi untuk memiliki jumlah kolom di atas sudah cukup!
2. <table>ataudisplay: table
Cara sederhana & sangat kompatibel untuk melakukan ini adalah dengan menggunakan table- Saya sarankan Anda mencobanya terlebih dahulu jika Anda memerlukan dukungan IE lama . Anda sedang berhadapan dengan kolom; divs + float bukan cara terbaik untuk melakukan itu (belum lagi fakta bahwa beberapa level div bersarang hanya untuk meretas batasan css hampir tidak lebih "semantik" daripada hanya menggunakan tabel sederhana). Jika Anda tidak ingin menggunakan tableelemen, pertimbangkan cssdisplay: table (tidak didukung oleh IE7 dan yang lebih lama).
Contoh: http://jsfiddle.net/emn13/7FFp3/
Html yang relevan: (tetapi pertimbangkan menggunakan plain<table>)
<div class="parent"><div>column 1</div><div>column 2</div></div>
Css yang relevan:
.parent { display: table; }
.parent > div {display: table-cell; width:50%; }
/*omit width:50% for auto-scaled column widths*/
Pendekatan ini jauh lebih kuat daripada menggunakan overflow:hiddendengan mengapung. Anda dapat menambahkan cukup banyak jumlah kolom; Anda dapat memilikinya skala otomatis jika Anda inginkan; dan Anda mempertahankan kompatibilitas dengan browser kuno. Berbeda dengan solusi float, Anda juga tidak perlu tahu sebelumnya kolom mana yang paling panjang; timbangan tinggi baik-baik saja.
KISS: jangan gunakan float hacks kecuali Anda perlu melakukannya. Jika IE7 merupakan masalah, saya masih akan memilih tabel sederhana dengan kolom semantik di atas solusi trik-CSS yang sulit dirawat dan kurang fleksibel setiap hari.
Omong-omong, jika Anda membutuhkan tata letak agar responsif (mis. Tidak ada kolom pada ponsel kecil), Anda dapat menggunakan @mediakueri untuk kembali ke tata letak blok polos untuk lebar layar kecil - ini berfungsi baik jika Anda menggunakan <table>atau display: tableelemen lainnya .
3. display:inline blockdengan hack margin negatif.
Alternatif lain adalah menggunakan display:inline block.
Contoh: http://jsbin.com/ovuqes/2/edit
Html yang relevan: (tidak adanya spasi di antaradivtag adalah signifikan!)
<div class="parent"><div><div>column 1</div></div><div><div>column 2</div></div></div>
Css yang relevan:
.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;
}
Ini sedikit rumit, dan margin negatif berarti bagian bawah kolom "true" dikaburkan. Ini pada gilirannya berarti Anda tidak dapat memposisikan apa pun relatif ke bagian bawah kolom itu karena itu terpotong oleh overflow: hidden. Perhatikan bahwa selain blok inline, Anda dapat mencapai efek yang serupa dengan float.
TL; DR : gunakan flexbox jika Anda dapat mengabaikan IE9 dan yang lebih lama; kalau tidak coba tabel (css). Jika tak satu pun dari opsi itu bekerja untuk Anda, ada peretasan margin negatif, tetapi ini dapat menyebabkan masalah tampilan aneh yang mudah terlewatkan selama pengembangan, dan ada batasan tata letak yang perlu Anda perhatikan.