CSS3 Multi-kolom Tata Letak
Tata letak CSS3 multi-kolom memungkinkan mudah definisi beberapa kolom teks - seperti di surat kabar:
harian Ping
Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta
nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
Dukungan Browser
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
Nomor diikuti oleh -webkit- atau -moz- menentukan versi pertama yang bekerja dengan awalan.
| Milik | |||||
|---|---|---|---|---|---|
| column-count | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
| column-gap | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
| column-rule | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
| column-rule-color | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
| column-rule-style | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
| column-rule-width | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
| column-width | 50.0 4.0 -webkit- |
10.0 | 2.0 -moz- | 9.0 3.1 -webkit- |
37.0 15.0 -webkit 11.1 |
CSS3 Multi-kolom Properti
Dalam bab ini Anda akan belajar tentang sifat multi-kolom berikut:
-
column-count -
column-gap -
column-rule-style -
column-rule-width -
column-rule-color -
column-rule -
column-span -
column-width
CSS3 Buat Beberapa Kolom
The column-count properti menentukan jumlah kolom elemen harus dibagi ke dalam.
Contoh berikut akan membagi teks dalam <div> elemen menjadi 3 kolom:
Contoh
div
{
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
Cobalah sendiri " CSS3 Tentukan Gap Antara Kolom
The column-gap properti menentukan kesenjangan antara kolom.
Contoh berikut menetapkan gap 40 piksel antara kolom:
Contoh
div
{
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
}
Cobalah sendiri " Aturan Kolom CSS3
The column-rule-style properti menentukan gaya aturan antara kolom:
Contoh
div
{
-webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
-moz-column-rule-style: solid; /* Firefox */
column-rule-style: solid;
}
Cobalah sendiri " The column-rule-width properti menentukan lebar aturan antara kolom:
Contoh
div
{
-webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
-moz-column-rule-width: 1px; /* Firefox */
column-rule-width: 1px;
}
Cobalah sendiri " The column-rule-color properti menentukan warna aturan antara kolom:
Contoh
div
{
-webkit-column-rule-color: lightblue; /* Chrome, Safari, Opera */
-moz-column-rule-color: lightblue; /* Firefox */
column-rule-color: lightblue;
}
Cobalah sendiri " The column-rule properti adalah properti singkat untuk setting semua kolom--aturan * sifat di atas.
Contoh berikut menetapkan lebar, gaya, dan warna dari aturan antara kolom:
Contoh
div
{
-webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
-moz-column-rule: 1px solid lightblue; /* Firefox */
column-rule: 1px solid lightblue;
}
Cobalah sendiri " Tentukan Berapa Banyak Kolom Elemen Harus Span
The column-span properti menentukan berapa banyak kolom elemen harus span di.
Contoh berikut menetapkan bahwa <h2> elemen harus mencakup seluruh semua kolom:
Contoh
h2 {
-webkit-column-span: all; /* Chrome, Safari, Opera */
column-span: all;
}
Cobalah sendiri " Tentukan The Lebar Kolom
The column-width properti menetapkan disarankan, lebar optimal untuk kolom.
Contoh berikut menetapkan bahwa disarankan, lebar optimal untuk kolom harus 100px:
Contoh
div {
-webkit-column-width: 100px; /* Chrome, Safari, Opera */
column-width: 100px;
}
Cobalah sendiri " CSS3 Multi-kolom Properti
Tabel berikut ini berisi semua sifat multi-kolom:
| Milik | Deskripsi |
|---|---|
| column-count | Menentukan jumlah kolom elemen harus dibagi menjadi |
| column-fill | Menentukan bagaimana mengisi kolom |
| column-gap | Menentukan kesenjangan antara kolom |
| column-rule | Sebuah properti singkat untuk setting semua kolom--aturan * properti |
| column-rule-color | Menentukan warna aturan antara kolom |
| column-rule-style | Menentukan gaya aturan antara kolom |
| column-rule-width | Menentukan lebar aturan antara kolom |
| column-span | Menentukan berapa banyak kolom elemen harus mencakup seluruh |
| column-width | Menentukan menyarankan, lebar optimal untuk kolom |
| columns | Sebuah properti singkat untuk setting kolom-lebar dan kolom-count |