column-rule Özelliği

column-rule özelliği, çok sütunlu metinde sütunlar arasına bir kenarlık belirler. Aldığı değerler bakımından border özelliği ile aynıdır.

Örnek . solid Tipi

Bu örnekte, metin 3 sütuna bölünecek ve sütunlar arasında 1px kalınlığında düz çizgi şeklinde kenarlıklar olacaktır (sütunlar arası mesafe otomatik olarak oluşturulacaktır, çünkü column-gap normal değerine ayarlanmıştır):

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

css#elem {
  column-rule: 1px solid black;
  column-count: 3;
  column-gap: normal;
  text-align: justify;
}

Результат:

Örnek . column-gap'ın Etkisi

Bu örnekte, metin 3 sütuna bölünecek ve aralarında 50px boşluk olacaktır. Kenarlık bu boşluğun ortasından geçecektir (kenarlığın sağında ve solunda 25px boşluk olacaktır):

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

css#elem {
  column-rule: 1px solid black;
  column-count: 3;
  column-gap: 50px;
  text-align: justify;
}

Результат:

Ayrıca Bakınız