column-fill
Misol
Ustunlar qanday to‘ldirilishini belgilang:
.newspaper1 {
column-fill: auto;
}
.newspaper2 {
column-fill: balance;
}
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Ta’rif va qo‘llanilishi
column-fill xususiyati ustunlar qanday — muvozanatli yoki muvozanatsiz — to‘ldirilishini belgilaydi.
Maslahat: Ko‘p ustunli elementga balandlik bersangiz, kontent ustunlarni qanday to‘ldirishini boshqarishingiz mumkin. Kontent muvozanatli taqsimlanishi yoki ketma-ket to‘ldirilishi mumkin.
| Standart qiymat: | balance |
|---|---|
| Meros qilinadi: | yo‘q |
| Animatsiya qilinadi: | yo‘q. animatable haqida o‘qing |
| Versiya: | CSS3 |
| JavaScript sintaksisi: | object.style.columnFill="auto" Sinab ko‘ring |
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar xususiyatni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Xususiyat | |||||
|---|---|---|---|---|---|
| column-fill | 50 | 10 | 52 | 10 | 37 |
CSS sintaksisi
column-fill: balance|auto|initial|inherit;
Xususiyat qiymatlari
| Qiymat | Tavsif | Demo |
|---|---|---|
| balance | Standart qiymat. Har bir ustunni taxminan bir xil hajmdagi kontent bilan to‘ldiradi, lekin ustunlarning belgilangan balandlikdan (height) oshib ketishiga yo‘l qo‘ymaydi (shuning uchun brauzer kontentni gorizontal bo‘yicha teng taqsimlaganda ustunlar belgilangan balandlikdan qisqaroq bo‘lishi mumkin) | Demo ❯ |
| auto | Har bir ustunni belgilangan balandlikka yetguncha to‘ldiradi va buni kontent tugaguncha davom ettiradi (shuning uchun bu qiymat barcha ustunlarni to‘ldirishi ham, ularni teng to‘ldirishi ham shart emas) | Demo ❯ |
| initial | Bu xususiyatni standart qiymatiga o‘rnatadi. initial haqida o‘qing | |
| inherit | Bu xususiyatni ota elementidan meros qilib oladi. inherit haqida o‘qing |
Ko‘proq misollar
Misol
<div> elementidagi matnni uchta ustunga bo‘ling:
div {
column-count: 3;
}
O‘zingiz sinab ko‘ring »
Misol
Ustunlar orasida 40 piksellik oraliq belgilang:
div {
column-gap: 40px;
}
O‘zingiz sinab ko‘ring »
Misol
Ustunlar orasidagi chiziqning kengligi, uslubi va rangini belgilang:
div {
column-rule: 4px double #ff00ff;
}
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
CSS darsligi: CSS ko‘p ustunli matn
HTML DOM ma’lumotnomasi: columnFill xususiyati
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!