Örnek
Sütunların genişliğini ve sayısını belirtir:
div
{
-webkit-columns: 100px 3; /* Chrome, Safari, Opera */
-moz-columns: 100px 3; /* Firefox */
columns: 100px 3;
}
Kendin dene " Daha "Try it Yourself" Aşağıdaki örnekler.
Tanımı ve Kullanımı
sütun özelliği kolon genişliği ve sütun sayısı ayarı için bir kestirme bir özelliktir.
| Varsayılan değer: | auto auto |
|---|---|
| Miras: | no |
| canlandırılabilir: | yes, see individual properties . Read about animatable Try it |
| Versiyon: | CSS3 |
| JavaScript sözdizimi: | object .style.columns="100px 3" Try it |
Tarayıcı Desteği
Tablodaki rakamlar tam özelliğini destekleyen ilk tarayıcı sürümü belirtin.
Sayılar -webkit- ardından veya önek ile çalıştı ilk sürümü belirtmek -moz-.
| özellik | |||||
|---|---|---|---|---|---|
| columns | 50.0 4,0 -webkit- | 10.0 | 9,0 -moz- | 9.0 3.1 -webkit- | 37.0 15.0 -webkit- 11.1 |
CSS sözdizimi
columns: auto| Mülkiyet Değerler değer Açıklama auto Varsayılan değer. Sütun-genişliğini hem de ayarlar "auto" ve sütun sayısı "auto" column-width sütunların genişliğini column-count sütun sayısı initial varsayılan değerine bu özelliği ayarlar. İlk hakkında okuyun inherit üst öğesinden bu özelliği devralır. Yaklaşık miras oku
Diğer Örnekler
Kolon-sayımı
Bir metni bölün <div> üç sütun halinde element:
div
{
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
Kendin dene "
Kolon boşluğu
Bir metni bölün <div> üç sütun halinde element ve sütunlar arasındaki 40 piksel boşluk belirtin.
div
{
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
}
Kendin dene "
Kolon-kural
sütunlar arasındaki kuralın genişliği, stil ve renk belirtin.
div
{
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
-webkit-column-rule: 4px outset #ff00ff; /* Chrome,
Safari, Opera */
-moz-column-rule: 4px outset #ff00ff;
/* Firefox */
column-rule: 4px outset #ff00ff;
}
Kendin dene "
İlgili Sayfalar
CSS3 öğretici: CSS3 Çoklu Sütunlar
HTML DOM referansı: columns property