Kolom Multi CSS

Layout multi-column CSS

Layout multi-column CSS memungkinkan kami dengan mudah mendefinisikan teks multi-column - seperti koran:

Novel tentang tiga negara

Kali pertama
Makan makan malam di Tanah Pematang, para pahlawan bersama-sama berperjanjian
Menyantasi pemimpin heroistik putih sabil

Katakan tentang keadaan besar di dunia, lama akan bersatu, lama akan berpisah: akhir zaman Zhou, tujuh negara berperang, kemudian disatukan ke dalam Qin; setelah Qin dihancurkan, Chu dan Han berperang, kemudian disatukan ke dalam Han; dinasti Han dari kebangkitan Kuangwu, diserahkan kepada Xian Di, lalu dibagi menjadi tiga negara. Mengapa mengakibatkan kekacauan, mungkin dimulai dari kekaisaran Huandi dan Lingdi. Huandi membatasi kelompok yang baik, mempercayai para eunuch. Saat Huandi wafat, Lingdi naik tahta, Jendral He Wu dan Tefu Chen Fan, bersama-sama mempertahankan; ada para eunuch seperti Cao Jie yang memegang kekuasaan, He Wu dan Chen Fan berencana untuk membunuh mereka, kerahasiaan kegiatan mereka tidak disegel, malah diserang, dan para penjaga semakin kuat. Pada tanggal 15 bulan April di tahun Jian宁, raja menghadiri Istana Wende. Sedang naik tempat duduk, angin kencang mendung di sudut gedung. Hanya ada serangga besar hijau yang terbang turun dari atap, menggiling di atas kursi. Raja terkejut jatuh, diselamatkan segera masuk ke istana, para pejabat semua lari untuk menghindari. Tak lama, serangga hilang. Tiba-tiba terjadi gempa petir dan hujan, bersama-sama dengan es, hingga tengah malam selesai, memusnahkan ribuan rumah. Pada bulan Februari tahun Jian宁 keempat, gempa bumi di Luoyang; dan laut meluap, penduduk di sepanjang pantai, semua dijepit oleh gelombang ke laut. Tahun Guanghe pertama, ayam betina berubah menjadi ayam jantan. Pada tanggal pertama bulan Juni, ada awan hitam berukuran puluhan yard yang terbang ke Istana Wende. Pada bulan Juli, ada cemburu di Altar Putih, pesisir Wuyuan, semua jatuh. Beberapa kejadian buruk, bukan hanya satu hal. Raja mengeluarkan surat perintah untuk bertanya kepada para pejabat tentang penyebab kejadian buruk, para penduduk di Luoyang menulis, menganggap bahwa serangga jatuh dan ayam berubah, karena para perempuan dan para eunuch memegang kekuasaan, kata-kata yang cukup kuat dan jujur. Raja melihat surat dan berdosa, kemudian mulai berubah pakaian. Cao Jie melihat di belakang, mendeklarasikan kepada sekeliling; kemudian diserang dengan hal lain dan disingkirkan ke lapangan. kemudian Zhang Rang, Zhao Zhong, Feng Yu, Duan Gui, Cao Jie, Hou Luan, Jie Shuo, Cheng Kuang, Xia Yun, Guo Sheng sepuluh orang bersama-sama berbuat kejahatan, dijuluki 'Sepuluh Eunuch Tetap'. Raja menghormati Zhang Rang, memanggilnya 'Ayah'. Kesehatan pemerintahan semakin buruk, sehingga hati rakyat di seluruh negeri berubah, para penjahat berakumulasi.

...... ......

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 dipisahkan elemen.

Contoh

div {
  Contoh di bawah membagi teks dalam elemen <div> ke 3 kolom:
}

Coba sendiri

column-count: 3;

column-gap CSS Tentukan jarak antara kolom

Atribut menentukan jarak antara kolom.

Contoh

div {
  Contoh di bawah menentukan jarak antara kolom 40 pixel:
}

Coba sendiri

column-gap: 40px;

column-rule-style CSS Aturan Kolom

Contoh

div {
  Atribut menentukan gaya aturan antara kolom:
}

Coba sendiri

column-rule-width column-rule-style: solid;

Contoh

div {
  Atribut menentukan lebar aturan antara kolom:
}

Coba sendiri

column-rule-color column-rule-width: 1px;

Contoh

div {
  Atribut menentukan warna aturan antara kolom:
}

Coba sendiri

Atribut column-rule adalah atribut singkat untuk mengatur semua atribut column-rule-* di atas.

Contoh di bawah menetapkan lebar, gaya, dan warna aturan antara kolom:

Contoh

div {
  column-rule: 1px solid lightblue;
}

Coba sendiri

Tentukan berapa banyak kolom elemen harus melintasi

Column-span Atribut menentukan berapa banyak kolom elemen harus melintasi.

Contoh di bawah menentukan elemen <h2> harus melintasi semua kolom:

Contoh

h2 {
  column-span: all;
}

Coba sendiri

Tentukan lebar kolom

Column-width Atribut menentukan lebar paling baik saran kolom.

Contoh di bawah menentukan lebar paling baik saran kolom seharusnya 100px:

Contoh

div {
  column-width: 100px;
}

Coba sendiri

Atribut Multi-Kolom CSS

Tabel di bawah menampilkan semua atribut multi-kolom:

Atribut Deskripsi
column-count Tentukan jumlah kolom yang harus dipisahkan elemen.
column-fill Tentukan bagaimana kolom diisi.
column-gap Tentukan jarak antara kolom.
column-rule Digunakan untuk mengatur atribut singkat semua column-rule-*.
column-rule-color Tentukan warna aturan antara kolom.
column-rule-style Tentukan gaya aturan antara kolom.
column-rule-width Tentukan lebar aturan antara kolom.
Column-span Tentukan berapa banyak kolom elemen seharusnya melintasi.
Column-width Tentukan lebar paling baik yang direkomendasikan untuk kolom.
Columns Atur singkatan properti column-width dan column-count.