CSS Beberapa Kolom
Tata Letak Multi-kolom CSS
Tata letak multi-kolom CSS memungkinkan definisi yang mudah dari beberapa kolom teks - seperti di surat kabar:
Ping Harian
Rasa
sakit itu sendiri adalah cinta Itulah mengapa untuk hal sekecil apa pun yang akan datang, siapa yang ditanggung oleh latihan normal kita untuk mengambil keuntungan dari konsekuensinya Rasa sakit dari rasa sakit di biro di Olimpiade, atau rasa sakit di biro di Olimpiade, dia ingin menjadi gangguan pada konsekuensinya, atau dia menderita rasa sakit dari sistem kekebalan Uni Eropa pada kenyataannya, eros dan konsumen, dan kebencian biasa terhadap zzril. Untuk waktu luang saat kita terbebas dari masa remaja kita ada pilihan
Properti Multi-kolom CSS
Dalam bab ini Anda akan mempelajari tentang properti multi-kolom berikut:
column-countcolumn-gapcolumn-rule-stylecolumn-rule-widthcolumn-rule-colorcolumn-rulecolumn-spancolumn-width
Dukungan Peramban
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
| Property | |||||
|---|---|---|---|---|---|
| column-count | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
| column-gap | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
| column-rule | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
| column-rule-color | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
| column-rule-style | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
| column-rule-width | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
| column-span | 50.0 | 10.0 | 71.0 | 9.0 | 37.0 |
| column-width | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
CSS Buat Beberapa Kolom
Properti column-countmenentukan jumlah kolom yang harus dibagi menjadi elemen.
Contoh berikut akan membagi teks pada elemen <div> menjadi 3 kolom:
Contoh
div
{
column-count: 3;
}
CSS Tentukan Kesenjangan Antar Kolom
Properti column-gapmenentukan celah antara kolom.
Contoh berikut menentukan celah 40 piksel di antara kolom:
Contoh
div
{
column-gap: 40px;
}
Aturan Kolom CSS
Properti column-rule-stylemenentukan gaya aturan antar kolom:
Contoh
div
{
column-rule-style: solid;
}
Properti column-rule-widthmenentukan lebar aturan antara kolom:
Contoh
div
{
column-rule-width: 1px;
}
Properti column-rule-colormenentukan warna aturan antar kolom:
Contoh
div
{
column-rule-color: lightblue;
}
Properti column-ruleadalah properti singkatan untuk mengatur semua properti kolom-aturan-* di atas.
Contoh berikut menetapkan lebar, gaya, dan warna aturan antar kolom:
Contoh
div
{
column-rule: 1px solid lightblue;
}
Tentukan Berapa Banyak Kolom yang Harus Direntang oleh Elemen
Properti column-spanmenentukan berapa banyak kolom yang harus dibentangkan oleh suatu elemen.
Contoh berikut menetapkan bahwa elemen <h2> harus menjangkau semua kolom:
Contoh
h2 {
column-span: all;
}
Tentukan Lebar Kolom
Properti column-widthmenentukan lebar optimal yang disarankan untuk kolom.
Contoh berikut menetapkan bahwa lebar optimal yang disarankan untuk kolom harus 100 piksel:
Contoh
div {
column-width: 100px;
}
Properti Multi-kolom CSS
Tabel berikut mencantumkan semua properti multi-kolom:
| Property | Description |
|---|---|
| column-count | Specifies the number of columns an element should be divided into |
| column-fill | Specifies how to fill columns |
| column-gap | Specifies the gap between the columns |
| column-rule | A shorthand property for setting all the column-rule-* properties |
| column-rule-color | Specifies the color of the rule between columns |
| column-rule-style | Specifies the style of the rule between columns |
| column-rule-width | Specifies the width of the rule between columns |
| column-span | Specifies how many columns an element should span across |
| column-width | Specifies a suggested, optimal width for the columns |
| columns | A shorthand property for setting column-width and column-count |