CSS3 - Multi Kolom
CSS3 mendukung multi kolom untuk menyusun teks sebagai struktur kertas berita.
Beberapa properti multi kolom yang paling umum digunakan seperti yang ditunjukkan di bawah ini -
| Sr.No. | Nilai & Deskripsi |
|---|---|
| 1 | column-count Digunakan untuk menghitung jumlah kolom elemen yang harus dibagi. |
| 2 | column-fill Digunakan untuk memutuskan, bagaimana mengisi kolom. |
| 3 | column-gap Digunakan untuk menentukan jarak antar kolom. |
| 4 | column-rule Digunakan untuk menentukan jumlah aturan. |
| 5 | rule-color Digunakan untuk menentukan warna aturan kolom. |
| 6 | rule-style Digunakan untuk menentukan aturan gaya untuk kolom. |
| 7 | rule-width Digunakan untuk menentukan lebar. |
| 8 | column-span Digunakan untuk menentukan rentang antar kolom. |
Contoh
Contoh di bawah ini menunjukkan susunan teks sebagai struktur kertas baru.
<html>
<head>
<style>
.multi {
/* Column count property */
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
/* Column gap property */
-webkit-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px;
/* Column style property */
-webkit-column-rule-style: solid;
-moz-column-rule-style: solid;
column-rule-style: solid;
}
</style>
</head>
<body>
<div class = "multi">
Tutorials Point originated from the idea that there exists a class
of readers who respond better to online content and prefer to learn
new skills at their own pace from the comforts of their drawing rooms.
The journey commenced with a single tutorial on HTML in 2006 and elated
by the response it generated, we worked our way to adding fresh tutorials
to our repository which now proudly flaunts a wealth of tutorials and
allied articles on topics ranging from programming languages to web
designing to academics and much more.
</div>
</body>
</html>Ini akan menghasilkan hasil sebagai berikut -
Misalkan, jika pengguna ingin menjadikan teks sebagai kertas baru tanpa garis, kita dapat melakukannya dengan menghapus sintaks gaya seperti yang ditunjukkan di bawah ini -
.multi {
/* Column count property */
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
/* Column gap property */
-webkit-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px;
}Ini akan menghasilkan hasil sebagai berikut -