column-width Özelliği

column-width özelliği, çok sütunlu metinde sütunların genişliğini belirler. Özelliğin değeri yüzde birimleri hariç, herhangi bir boyut birimi veya auto (varsayılan) anahtar kelimesidir. Değer auto olduğunda, tarayıcı sütun genişliğini column-count ve column-gap değerlerine dayanarak kendisi en uygun şekilde belirler.

Sözdizimi

cssseçici {
  column-width: değer;
}

Örnek . Belirtilen genişlik

Bu örnekte sütun genişliği column-width 150px olarak belirtilmiş, sütun sayısı column-count ise auto değerine ayarlanmıştır. Sonuç olarak sütun genişliği 150px olacak, sütun sayısı ve aralarındaki boşluk tarayıcı tarafından otomatik olarak ayarlanacaktır:

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

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

Результат:

Örnek . Auto değeri

Bu örnekte metin 3 sütuna bölünecektir (çünkü column-count değeri 3 olarak ayarlanmıştır), sütun genişliği ise otomatik olarak hesaplanacaktır:

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

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

Результат:

Ayrıca Bakınız