Ustunlar orasidagi chiziq

Bu sahifa CSS ustun qoidalari (column rules), span va kenglik xossalarini yoritadi.

CSS ustun chizig‘i (column-rule)

CSS column-rule-style xossasi ustunlar orasidagi vertikal chiziq uslubini belgilaydi:

div {
column-rule-style: solid;
}

CSS column-rule-width xossasi ustunlar orasidagi vertikal chiziq kengligini belgilaydi:

div {
column-rule-width: 1px;
}

CSS column-rule-color xossasi ustunlar orasidagi vertikal chiziq rangini belgilaydi:

div {
column-rule-color: lightblue;
}

CSS column-rule xossasi yuqoridagi barcha column-rule-* xossalarini belgilash uchun qisqartma xossadir.

Ustunlar orasidagi vertikal chiziq kengligi, uslubi va rangini belgilash:

div {
column-rule: 1px solid lightblue;
}

CSS column-span xossasi element (odatda sarlavha) nechta ustunni qamrab olishini belgilaydi.

<h2> elementi barcha ustunlarni qamrab olishini (va markazda tekislanishini) belgilang:

h2 {
column-span: all;
text-align: center;
}

CSS column-width xossasi har bir ustun uchun tavsiya etilgan, optimal kenglikni belgilaydi.

Bu yerda brauzer ustunlar sonini shu kenglik va mavjud bo‘sh joyga qarab belgilaydi.

Ustunlar uchun tavsiya etilgan optimal kenglik 100px bo‘lishini belgilash:

div {
column-width: 100px;
}

Quyidagi jadval barcha ko‘p ustunli (multi-columns) xossalarni sanab o‘tadi:

Xususiyat	Tavsif
column-count	Element bo‘linishi kerak bo‘lgan ustunlar sonini belgilaydi
column-fill	Ustunlarni qanday to‘ldirishni belgilaydi
column-gap	Ustunlar orasidagi bo‘shliqni belgilaydi
column-rule	Barcha column-rule-* xossalarini belgilash uchun qisqartma xossa
column-rule-color	Ustunlar orasidagi qoida rangini belgilaydi
column-rule-style	Ustunlar orasidagi qoida uslubini belgilaydi
column-rule-width	Ustunlar orasidagi qoida kengligini belgilaydi
column-span	Element qancha ustun bo‘lishi kerakligini belgilaydi
column-width	Ustunlar uchun tavsiya etilgan, optimal kenglikni belgilaydi
columns	column-width va column-count’ni o‘rnatish uchun qisqartma xususiyat

Yutuqlaringizni kuzating – bu bepul!