CSS sütunları Özellik
Örnek
Her sütun için minimum genişliği ve maksimum sütun sayısını belirtin:
div
{
columns: 100px 3;
}
Aşağıda daha fazla "Kendiniz Deneyin" örnekleri.
Tanım ve Kullanım
Özellik columns
, aşağıdakiler için kestirme bir özelliktir:
Sütun genişliği bölümü her sütun için minimum genişliği tanımlarken, sütun sayısı bölümü maksimum sütun sayısını tanımlar. Bu özelliği kullanarak, çok sütunlu düzen, medya sorgularına veya diğer kurallara ihtiyaç duymadan, dar tarayıcı genişliklerinde otomatik olarak tek bir sütuna bölünecektir.
Varsayılan değer: | araba araba |
---|---|
Miras: | Hayır |
canlandırılabilir: | evet, bireysel özelliklere bakın . Canlandırılabilir hakkında bilgi edinin |
Sürüm: | CSS3 |
JavaScript sözdizimi: | nesne .style.columns="100px 3" |
Tarayıcı Desteği
Tablodaki sayılar, özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtir.
-webkit- veya -moz- tarafından takip edilen sayılar, bir önekle çalışan ilk sürümü belirtir.
Property | |||||
---|---|---|---|---|---|
columns | 50.0 4.0 -webkit- |
10.0 | 52.0 9.0 -moz- |
9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
CSS Sözdizimi
columns: auto|column-width column-count|initial|inherit;
Mülk değerleri
Value | Description |
---|---|
auto | Default value. Sets both the column-width and column-count to "auto" |
column-width | Defines the minimum width for each column |
column-count | Defines the maximum number of columns |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Daha fazla örnek
Örnek
Bir <div> öğesindeki metni üç sütuna bölün:
div
{
column-count: 3;
}
Örnek
Sütunlar arasında 40 piksel boşluk belirleyin:
div
{
column-gap: 40px;
}
Örnek
Sütunlar arasındaki kuralın genişliğini, stilini ve rengini belirtin:
div
{
column-rule: 4px double #ff00ff;
}
İlgili Sayfalar
CSS eğitimi: CSS Çoklu Sütunları
HTML DOM referansı: sütunlar özelliği