CSS3 multi-kolom
konten CSS3 teks dapat dirancang seperti tata letak multi-kolom surat kabar, contoh-contoh berikut:
Tutorial ini - ilmu tidak hanya teknologi, tetapi juga mimpi! tutorial ini (www.w3big.com) menyediakan paling lengkap tutorial teknologi pemrograman berbasis memperkenalkan dasar-dasar HTML, CSS, Javascript, Python, Java, Ruby, C, PHP, MySQL, dan bahasa pemrograman lainnya. Tetapi situs ini juga menyediakan sejumlah contoh online, dengan cara misalnya, Anda lebih baik dapat belajar pemrograman.
Dukungan Browser
Angka dalam tabel tersebut merupakan browser pertama yang mendukung nomor versi metode.
Segera setelah peramban nomor -webkit- atau awalan-moz ditentukan.
| milik | |||||
|---|---|---|---|---|---|
| Kolom-count | 4.0 -webkit- | 10,0 | 2.0 moz | 3.1 -webkit- | 15,0 -webkit- 11.1 |
| Kolom-gap | 4.0 -webkit- | 10,0 | 2.0 moz | 3.1 -webkit- | 15,0 -webkit- 11.1 |
| Kolom-aturan | 4.0 -webkit- | 10,0 | 2.0 moz | 3.1 -webkit- | 15,0 -webkit- 11.1 |
| Kolom-aturan-warna | 4.0 -webkit- | 10,0 | 2.0 moz | 3.1 -webkit- | 15,0 -webkit 11.1 |
| Kolom-aturan-gaya | 4.0 -webkit- | 10,0 | 2.0 moz | 3.1 -webkit- | 15,0 -webkit 11.1 |
| Kolom-aturan-lebar | 4.0 -webkit- | 10,0 | 2.0 moz | 3.1 -webkit- | 15,0 -webkit 11.1 |
| Kolom-lebar | 4.0 -webkit- | 10,0 | 2.0 moz | 3.1 -webkit- | 15,0 -webkit 11.1 |
CSS3 sifat multi-kolom
bab ini kita akan mempelajari beberapa sifat kolom CSS3:
-
column-count -
column-gap -
column-rule-style -
column-rule-width -
column-rule-color -
column-rule -
column-span -
column-width
CSS3 untuk membuat beberapa kolom
column-count atribut menentukan jumlah kolom perlu dibagi.
Contoh berikut <div> unsur dalam teks dibagi menjadi tiga:
contoh
-webkit-kolom-count: 3; / * Chrome, Safari, Opera * /
-moz-column-count: 3; / * Firefox * /
Kolom-count: 3;
}
Coba »
CSS3 kesenjangan multi-kolom antara kolom dan kolom
column-gap properti menentukan kesenjangan antara kolom dan kolom.
Contoh berikut menetapkan kesenjangan antara kolom dan kolom adalah 40 piksel:
contoh
-webkit-kolom-gap: 40px; / * Chrome, Safari, Opera * /
-moz-column-gap: 40px; / * Firefox * /
Kolom-gap: 40px;
}
Coba »
batas kolom CSS3
column-rule-style properti menentukan kolom gaya perbatasan antara kolom:
contoh
-webkit-kolom-aturan-style: padat; / * Chrome, Safari, Opera * /
-moz-column-rule-style: padat; / * Firefox * /
Kolom-aturan-style: padat;
}
Coba »
column-rule-width atribut menentukan ketebalan perbatasan dua:
contoh
-webkit-kolom-aturan-width: 1px; / * Chrome, Safari, Opera * /
-moz-column-rule-width: 1px; / * Firefox * /
Kolom-aturan-width: 1px;
}
Coba »
column-rule-color atribut menentukan warna perbatasan dua:
contoh
-webkit-kolom-aturan-warna: lightblue; / * Chrome, Safari, Opera * /
-moz-column-rule-warna: lightblue; / * Firefox * /
Kolom-aturan-warna: lightblue;
}
Coba »
column-rule properti adalah istilah untuk semua kolom--aturan * properti.
Contoh berikut menetapkan kolom langsung untuk ketebalan perbatasan, warna dan gaya:
contoh
-webkit-kolom-aturan: 1px solid lightblue; / * Chrome, Safari, Opera * /
-moz-column-rule: 1px solid lightblue; / * Firefox * /
Kolom-aturan: 1px solid lightblue;
}
Coba »
Berapa banyak kolom seluruh elemen tertentu
Contoh berikut menetapkan <h2> elemen di semua kolom:
contoh
-webkit-kolom-rentang: semua; / * Chrome, Safari, Opera * /
Kolom-rentang: semua;
}
Coba »
Menentukan lebar kolom
column-width atribut menentukan lebar kolom.
CSS3 sifat multi-kolom
Tabel berikut mencantumkan semua atribut CSS3 multi-kolom:
| milik | deskripsi |
|---|---|
| Kolom-count | Jumlah kolom yang ditentukan elemen harus dibagi. |
| Kolom-fill | Menentukan bagaimana mengisi kolom |
| Kolom-gap | Menentukan kesenjangan antara kolom dan kolom |
| Kolom-aturan | Semua kolom--aturan * properti singkat |
| Kolom-aturan-warna | Menentukan warna perbatasan antara kedua |
| Kolom-aturan-gaya | Tentukan gaya perbatasan antara kedua |
| Kolom-aturan-lebar | Menentukan ketebalan perbatasan antara kedua |
| Kolom-span | Menentukan berapa banyak kolom untuk menyeberang elemen |
| Kolom-lebar | Menentukan lebar kolom |
| kolom | Pengaturan kolom-lebar dan kolom-count singkatan |