CSS sütun genişliği Özellik
Örnek
Sütun genişliğinin 100 piksel olması gerektiğini belirtin:
div
{
column-width: 100px;
}
Aşağıda daha fazla "Kendiniz Deneyin" örnekleri.
Tanım ve Kullanım
Özellik column-width
, sütun genişliğini belirtir.
Sütun sayısı, öğe genelinde tüm içeriği göstermek için gereken minimum sütun sayısı olacaktır.
column-width
esnek bir özelliktir. Tarayıcı için minimum genişlik önerisicolumn-width
olarak düşünün
. Tarayıcı, belirttiğiniz genişlikte en az iki sütuna sığamadığında, sütunlar duracak ve tek bir sütuna düşecektir.
Varsayılan değer: | Oto |
---|---|
Miras: | Hayır |
canlandırılabilir: | Evet. Canlandırılabilir hakkında bilgi edinin |
Sürüm: | CSS3 |
JavaScript sözdizimi: | nesne .style.columnWidth="100px" |
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 | |||||
---|---|---|---|---|---|
column-width | 50.0 4.0 -webkit- |
10.0 | 52.0 2.0 -moz- |
9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
CSS Sözdizimi
column-width: auto|length|initial|inherit;
Mülk değerleri
Value | Description | Play it |
---|---|---|
auto | Default value. The column width will be determined by the browser | |
length | A length that specifies the width of the columns. The number of columns will be the minimum number of columns needed to show all the content across the element. Read about length units | |
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ı: columnWidth özelliği