Örnek
kolonlar için önerilen bir optimum genişliği belirtin:
div
{
-webkit-column-width: 100px; /* Chrome, Safari, Opera */
-moz-column-width: 100px; /* Firefox */
column-width: 100px;
}
Kendin dene " Daha "Try it Yourself" Aşağıdaki örnekler.
Tanımı ve Kullanımı
Sütun genişliği özelliği sütunlar için önerilen bir optimal genişliğini belirtir.
| Varsayılan değer: | auto |
|---|---|
| Miras: | no |
| canlandırılabilir: | yes. Read about animatable Try it |
| Versiyon: | CSS3 |
| JavaScript sözdizimi: | object .style.columnWidth="100px" 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 | |||||
|---|---|---|---|---|---|
| column-width | 50.0 4,0 -webkit- | 10.0 | 2.0 -moz- | 9.0 3.1 -webkit- | 37.0 15.0 -webkit- 11.1 |
CSS sözdizimi
column-width: auto| Mülkiyet Değerler değer Açıklama Oynat auto Varsayılan değer. sütun genişliği tarayıcı tarafından belirlenecektir Oynat " length sütun genişliğini belirten bir uzunluk Oynat " initial varsayılan değerine bu özelliği ayarlar. İlk hakkında okuyun Oynat " 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ı: columnWidth property