Properti lebar kolom CSS
Contoh
Tentukan bahwa lebar kolom harus 100px:
div
{
column-width: 100px;
}
Lebih banyak contoh "Coba Sendiri" di bawah ini.
Definisi dan Penggunaan
Properti column-width
menentukan lebar kolom.
Jumlah kolom akan menjadi jumlah minimum kolom yang diperlukan untuk menampilkan semua konten di seluruh elemen.
column-width
adalah properti yang fleksibel. Anggap saja
column-width
sebagai saran lebar minimum untuk browser. Setelah browser tidak dapat memuat setidaknya dua kolom pada lebar yang Anda tentukan, maka kolom akan berhenti dan jatuh ke dalam satu kolom.
Nilai bawaan: | mobil |
---|---|
Diwarisi: | tidak |
Animasi: | Ya. Baca tentang animasi |
Versi: kapan: | CSS3 |
Sintaks JavaScript: | objek .style.columnWidth="100px" |
Dukungan Peramban
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
Angka yang diikuti oleh -webkit- atau -moz- menentukan versi pertama yang berfungsi dengan awalan.
Property | |||||
---|---|---|---|---|---|
column-width | 50.0 4.0 -webkit- |
10.0 | 52.0 2.0 -moz- |
9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
Sintaks CSS
column-width: auto|length|initial|inherit;
Nilai properti
Value | Description | Play it |
---|---|---|
auto | Default value. The column width will be determined by the browser | |
length | A length that specifies the width of the columns. The number of columns will be the minimum number of columns needed to show all the content across the element. Read about length units | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Lebih Banyak Contoh
Contoh
Bagi teks dalam elemen <div> menjadi tiga kolom:
div
{
column-count: 3;
}
Contoh
Tentukan celah 40 piksel di antara kolom:
div
{
column-gap: 40px;
}
Contoh
Tentukan lebar, gaya, dan warna aturan antar kolom:
div
{
column-rule: 4px double #ff00ff;
}
Halaman Terkait
Tutorial CSS: Beberapa Kolom CSS
Referensi DOM HTML: properti columnWidth