Properti isi kolom CSS
Contoh
Tentukan cara mengisi kolom:
.newspaper1 {
column-fill: auto;
}
.newspaper2 {
column-fill: balance;
}
Lebih banyak contoh "Coba Sendiri" di bawah ini.
Definisi dan Penggunaan
Properti column-fill
menentukan cara mengisi kolom, seimbang atau tidak.
Tips: Jika Anda menambahkan tinggi ke elemen multi-kolom, Anda bisa mengontrol bagaimana konten mengisi kolom. Isinya dapat diseimbangkan atau diisi secara berurutan.
Nilai bawaan: | keseimbangan |
---|---|
Diwarisi: | tidak |
Animasi: | tidak. Baca tentang animasi |
Versi: kapan: | CSS3 |
Sintaks JavaScript: | objek .style.columnFill="auto" |
Dukungan Peramban
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
Angka diikuti oleh -moz- menentukan versi pertama yang bekerja dengan awalan.
Property | |||||
---|---|---|---|---|---|
column-fill | 50.0 | 10.0 | 52.0 13.0 -moz- |
10.0 7.0 -webkit- |
37.0 |
Sintaks CSS
column-fill: balance|auto|initial|inherit;
Nilai properti
Value | Description |
---|---|
balance | Default value. Fills each column with about the same amount of content, but will not allow the columns to be taller than the height (so, columns might be shorter than the height as the browser distributes the content evenly horizontally) |
auto | Fills each column until it reaches the height, and do this until it runs out of content (so, this value will not necessarily fill all the columns nor fill them evenly) |
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 kolomFill