column-count Özelliği

column-count özelliği, çok sütunlu metindeki tavsiye edilen sütun sayısını belirler. Gerçek sütun sayısı, sütun genişliği ve aralarındaki boşluğun boyutuna bağlı olarak belirtilenden farklı olabilir.

Sözdizimi

cssseçici {
  column-count: sayı | auto;
}

Değerler

Değer	Açıklama
sayı	Belirtilen sayıda sütun tanımlar. Daha doğrusu, tarayıcıya bu sayıda sütun kullanmasını tavsiye eder, çünkü gerçek sütun sayısı sütun genişliği ve aralarındaki boşluğun boyutuna bağlı olarak belirtilenden farklı olabilir.
`auto`	Tarayıcı en uygun sütun sayısını kendisi belirler.

Varsayılan değer: auto.

Örnek

Bu örnekte metin 3 sütuna bölünecektir (tabi ki çok sütunluluğu destekleyen tarayıcılarda, diğerlerinde tek sütunlu normal metin görünecektir):

html<div id="elem">
  some long text
</div>

css#elem {
  column-count: 3;
  text-align: justify;
}

Результат:

Örnek . Auto değeri

Bu örnekte sütun genişliği column-width olarak 150px belirtilmiş ve sütun sayısı column-count auto değerine ayarlanmıştır - tarayıcı gerekli sütun sayısını ve aralarındaki boşluğu kendisi belirleyecektir:

html<div id="elem">
  some long text
</div>

css#elem {
  column-count: auto;
  column-width: 150px;
  text-align: justify;
}

Результат:

Ayrıca bakınız

sütun genişliğini belirleyen column-width özelliği,
sütunlar arası boşluğu belirleyen column-gap özelliği,
sütunlar arası sınırı belirleyen column-rule özelliği,
Bir öğenin kaç sütun boyunca uzaması gerektiğini belirleyen column-span özelliği,
çok sütunluluk için kısayol özellik olan columns özelliği