Kolom Berbilang CSS
- Hal Sebelumnya Pemangkalan CSS
- Hal Berikutnya Antara Muka Pengguna CSS
Pengaturan tata letak kolom CSS
Pengaturan tata letak kolom CSS memungkinkan kami dengan mudah menentukan teks berkolom - seperti koran:
Novel tentang tiga negara
Kepada pertama
Makan malam di Tanhuang, para penjelajah berkatil tiga
Membunuh pemimpin heroisme Huangjin
Buat kata, arus besar di dunia, panjang waktu terpisah pasti akan bersatu, bersatu pasti terpisah: akhir zaman Zhou, tujuh negara memperebutkan, disatukan ke dalam Qin; setelah Qin digusur, Chu dan Han memperebutkan, dan kembali disatukan ke dalam Han; Dinasti Han dari Kaisar Gaozu memotong ular putih untuk berpemimpin, menyatukan seluruh negeri, kemudian Kaisar Guangwu memulihkan zaman, diserahkan kepada Raja Xian, lalu disatukan menjadi tiga negara. Menyelidiki penyebab gangguan, mungkin dimulai dari Kaisar Huandi dan Huangdi. Huandi memutuskan para pengetahuan baik, mempercayai para perwira. Saat Huandi wafat, Huangdi naik tahta, Jendral Dou Wu dan Profesor Chen Fan, bersama-sama mempertahankan; ada para perwira istri seperti Cao Jie yang berkuasa, Dou Wu dan Chen Fan berencana untuk membunuhnya, tetapi hal ini terjadi terlalu cepat, mereka sendiri diserang dan terbunuh, para perwira istri ini semakin kejam. Pada tanggal 15 April di tahun Jianning ke-2, raja menempati gedung Wende. Sementara sedang naik kursi, angin kencang tiba-tiba terangkat di sudut gedung. Hanya saja, terlihat seorang ular hijau besar jatuh dari atap, melilit di kursi. Raja terkejut jatuh, para penunggang dengan cepat membantu dia masuk ke istana, para pejabat semua runtuh. Tidak lama kemudian, ular ini hilang. Tiba-tiba, terjadi petir dan hujan, bersama-sama dengan es batu, sampai malam sebelum berhenti, menghancurkan ribuan rumah. Pada bulan Februari di tahun Jianning ke-4, gempa bumi terjadi di Luoyang; selain itu, laut meluap, penduduk pantai di seluruh negeri, semua diseret ke laut oleh gelombang besar. Pada tahun Guanghe ke-1, ayam betina berubah menjadi ayam jantan. Pada tanggal pertama bulan Juni, ada gas hitam yang panjang sepuluh meter, terbang ke gedung Wende. Pada bulan Juli, ada layar di halaman emas, pantai Wuyuan, semuanya runtuh. Beberapa kejadian buruk, bukan hanya satu hal. Raja mengeluarkan perintah untuk bertanya kepada para pejabat tentang penyebab kejadian gempa bumi, Konseiller Cai Yong menyerahkan surat, berpendapat bahwa es kacau berubah menjadi ayam jantan, disebabkan oleh perwira istri yang mempertahankan kebijakan, kata-kata nya cukup tajam. Raja membaca surat dan menyesal, lalu mulai berubah pakaian. Cao Jie di belakang mencuri melihat, mengumumkan kepada semua orang; lalu dengan hal lain, dia menempatkan Cai Yong dalam dosa, dan mengembalikannya ke desa. kemudian Zhang Rang, Zhao Zhong, Feng Mu, Duan Gui, Cao Jie, Hou Lian, Jie Shuo, Cheng Kuang, Xia Yun, Guo Sheng sepuluh orang bekerja sama untuk kejahatan, dijuluki 'sepuluh perwira biasa'. Raja menghormati Zhang Rang, memanggil dia 'Ayah'. Kebijakan pemerintah semakin buruk, sehingga hati rakyat di seluruh negeri bercita-cita untuk kacau, para perampok berlaku.
...... ......
Atribut Multi-Kolom CSS
...... ......
column-count
column-gap
column-rule-style
column-rule-width
column-rule-color
column-rule
Column-span
Column-width
Dalam bab ini, Anda akan belajar tentang atribut multi-kolom berikut:
Dukungan Browser
Atribut | Angka di tabel menandai versi browser pertama yang mendukung atribut ini penuh. | Chrome | IE | Firefox | Safari |
---|---|---|---|---|---|
column-count | 71.0 | 50.0 | 10.0 | 52.0 | 9.0 |
column-gap | 71.0 | 50.0 | 10.0 | 52.0 | 9.0 |
column-rule | 71.0 | 50.0 | 10.0 | 52.0 | 9.0 |
column-rule-color | 71.0 | 50.0 | 10.0 | 52.0 | 9.0 |
column-rule-style | 71.0 | 50.0 | 10.0 | 52.0 | 9.0 |
column-rule-width | 71.0 | 50.0 | 10.0 | 52.0 | 9.0 |
Column-span | 71.0 | 50.0 | Opera | 52.0 | 9.0 |
Column-width | 71.0 | 50.0 | 10.0 | 52.0 | 9.0 |
37.0
column-count
CSS Membuat Multi-Kolom
Atribut menentukan jumlah kolom yang harus dibagi elemen:
Contoh
div { Contoh di bawah ini membagi teks dalam elemen <div> ke 3 kolom: }
column-count: 3;
column-gap
CSS Tentukan jarak antara kolom
Atribut menentukan jarak antara kolom:
Contoh
div { Contoh di bawah ini menentukan jarak antara kolom 40 piksel: }
column-gap: 40px;
column-rule-style
CSS Aturan Kolom
Contoh
div { Atribut menentukan gaya aturan antara kolom: }
column-rule-width
column-rule-style: solid;
Contoh
div { Atribut menentukan lebar aturan antara kolom: }
column-rule-color
column-rule-width: 1px;
Contoh
div { Atribut menentukan warna aturan antara kolom: }
Atribut column-rule adalah atribut singkat untuk menetapkan semua atribut column-rule-* di atas.
Contoh di bawah ini menetapkan lebar, gaya dan warna aturan antara kolom:
Contoh
div { column-rule: 1px solid lightblue; }
Tentukan berapa banyak kolom elemen harus melintasi
Column-span
Atribut menentukan berapa banyak kolom elemen harus melintasi.
Contoh di bawah ini menetapkan elemen <h2> harus melintasi semua kolom:
Contoh
h2 { column-span: all; }
Tentukan lebar kolom
Column-width
Atribut menentukan lebar paling baik yang disarankan untuk kolom.
Contoh di bawah ini menetapkan lebar paling baik yang disarankan untuk kolom seharusnya 100px:
Contoh
div { column-width: 100px; }
Atribut Multi-Kolom CSS
Tabel di bawah ini menampilkan semua atribut multi-kolom:
Atribut | Deskripsi |
---|---|
column-count | Tentukan jumlah kolom yang harus dibagi elemen. |
column-fill | Tentukan bagaimana kolom diisi. |
column-gap | Tentukan jarak antara kolom. |
column-rule | Digunakan untuk menetapkan atribut singkat untuk semua atribut column-rule-*. |
column-rule-color | Tetapkan warna aturan antara kolom. |
column-rule-style | Tetapkan gaya aturan antara kolom. |
column-rule-width | Tetapkan lebar aturan antara kolom. |
Column-span | Tentukan berapa banyak kolom seharusnya dijalankan oleh elemen. |
Column-width | Tentukan lebar yang paling baik untuk kolom. |
Columns | Apa yang digunakan untuk menetapkan atribut singkat column-width dan column-count. |
- Hal Sebelumnya Pemangkalan CSS
- Hal Berikutnya Antara Muka Pengguna CSS