Lebar kolom - Trik CSS

Anonim

Saat Anda ingin mempertahankan kolom Anda pada lebar tertentu, gunakan column-width.

section ( -webkit-column-width: 200px; -moz-column-width: 200px; column-width: 200px; )

Browser akan menghitung berapa banyak kolom dengan lebar setidaknya yang dapat muat di dalam ruang. Anggap saja column-widthsebagai saran lebar minimum untuk browser.

column-widthadalah properti yang fleksibel. Setelah browser tidak dapat memuat setidaknya 2 kolom pada lebar yang Anda tentukan, maka kolom akan berhenti dan jatuh ke dalam satu kolom.

Properti ini juga digunakan dalam singkatan untuk columnsdan dapat digunakan bersama-sama column-count. Ketika kedua properti dideklarasikan column-countadalah jumlah kolom maksimum.

Nilai

Anda dapat mengatur column-widthke autoatau panjang.

Gunakan autojika Anda juga menggunakan column-countatau jika Anda perlu mematikan properti. Anggap saja sebagai cara memberi tahu browser untuk membiarkan column-countyang memimpin.

Untuk menentukan lebar kolom, gunakan panjang yang lebih besar dari (atau sama dengan) 0. Anda dapat menggunakan unit CSS apa pun kecuali untuk persentase.

Dukungan Browser

Dukungan tata letak multi-kolom:

Chrome Safari Firefox Opera YAITU Android iOS
Apa saja 3+ 1,5+ 11.1+ 10+ 2.3+ 6.1+

Jangan lupa awalan Anda!