tutorial pengembangan web terbaru
 

CSS beberapa Kolom


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