column-width xususiyati

column-width xususiyati ko'p ustunli matndagi ustunlarning kengligini belgilaydi. Xususiyatning qiymati foizlardan tashqari har qanday o'lchov birliklari, yoki auto (standart) kalit so'zidir. auto qiymatida brauzer column-count va column-gap asosida ustunlarning optimal kengligini o'zi tanlaydi.

Sintaksis

cssselektor {
  column-width: qiymat;
}

Misol . Belgilangan kenglik

Ushbu misolda ustun kengligi column-width 150px deb belgilangan, ularning soni column-count esa auto qiymatida. Natijada ustunlarning kengligi 150px bo'ladi, ularning soni va orasidagi masofani brauzer o'zi tanlaydi:

html<div id="elem">
  some long text
</div>
css#elem {
  column-count: auto;
  column-width: 150px;
  text-align: justify;
}

Результат:

Misol . Auto qiymati

Ushbu misolda matn 3 ustunga bo'linadi (chunki column-count 3 qiymatida), ammo ularning kengligi avtomatik hisoblanadi:

html<div id="elem">
  some long text
</div>
css#elem {
  column-width: auto;
  column-count: 3;
  text-align: justify;
}

Результат:

Shuningdek qarang

  • column-count xususiyati,
    ustunlar sonini belgilaydi
  • column-gap xususiyati,
    ustunlar orasidagi masofani belgilaydi
  • column-rule xususiyati,
    ustunlar orasidagi chegarani belgilaydi
  • column-span xususiyati,
    element qancha ustunga cho'zilishini belgilaydi
  • columns xususiyati,
    ko'p ustunlilik uchun qisqartirilgan xususiyatdir