CSS sütun doldurma Özellik
Örnek
Sütunların nasıl doldurulacağını belirtin:
.newspaper1 {
column-fill: auto;
}
.newspaper2 {
column-fill: balance;
}
Aşağıda daha fazla "Kendiniz Deneyin" örnekleri.
Tanım ve Kullanım
Özellik column-fill
, dengeli veya değil, sütunların nasıl doldurulacağını belirtir.
İpucu: Çok sütunlu bir öğeye yükseklik eklerseniz, içeriğin sütunları nasıl dolduracağını kontrol edebilirsiniz. İçerik sıralı olarak dengelenebilir veya doldurulabilir.
Varsayılan değer: | denge |
---|---|
Miras: | Hayır |
canlandırılabilir: | Hayır. Canlandırılabilir hakkında bilgi edinin |
Sürüm: | CSS3 |
JavaScript sözdizimi: | nesne .style.columnFill="auto" |
Tarayıcı Desteği
Tablodaki sayılar, özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtir.
-moz- tarafından takip edilen sayılar, bir önekle çalışan ilk sürümü belirtir.
Property | |||||
---|---|---|---|---|---|
column-fill | 50.0 | 10.0 | 52.0 13.0 -moz- |
10.0 7.0 -webkit- |
37.0 |
CSS Sözdizimi
column-fill: balance|auto|initial|inherit;
Mülk değerleri
Value | Description |
---|---|
balance | Default value. Fills each column with about the same amount of content, but will not allow the columns to be taller than the height (so, columns might be shorter than the height as the browser distributes the content evenly horizontally) |
auto | Fills each column until it reaches the height, and do this until it runs out of content (so, this value will not necessarily fill all the columns nor fill them evenly) |
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ı: columnFill özelliği