W3.CSS katakchalar
Katakchali maket
W3.CSS oddiy ustunli maketlar yaratish uchun katakcha (cell) klasslarini taqdim etadi.
Katakchalar o‘z kengligi va balandligini avtomatik moslashtira oladi hamda vertikal tekislanishi mumkin.
Hello W3.CSS Cell
Hello W3.CSS Cell
Hello W3.CSS Cell
Hello W3.CSS Cell
Hello W3.CSS Cell
Hello W3.CSS Cell
Katakcha klasslari
| Klass | Tavsif |
|---|---|
w3-cell |
Katakcha yaratadi |
w3-cell-row |
Katakchalar uchun konteyner yaratadi |
w3-cell-top |
Katakchani yuqori qismga tekislaydi |
w3-cell-middle |
Katakchani o‘rtaga tekislaydi |
w3-cell-bottom |
Katakchani pastki qismga tekislaydi |
w3-cell klassi
w3-cell klassi elementlarni katakchalar sifatida yonma-yon ko‘rsatadi.
Cell 1
Cell 2
Misol
<div class="w3-cell-row">
<div class="w3-cell w3-container">Cell 1</div>
<div class="w3-cell w3-container">Cell 2</div>
</div>
O‘zingiz sinab ko‘ring »
w3-cell-row klassi
w3-cell-row klassi katakchalar uchun konteyner yaratadi.
Standart holatda konteyner kengligi 100% bo‘ladi.
Cell 1
Cell 2
Misol
<div class="w3-cell-row">
<div class="w3-cell w3-container">Cell 1</div>
<div class="w3-cell w3-container">Cell 2</div>
</div>
O‘zingiz sinab ko‘ring »
Katakchalar o‘z kengligini moslashtiradi
Katakchalar o‘z kengligini ichidagi kontentga avtomatik moslashtiradi.
Qisqa
Bu katakchada birinchi katakchaga qaraganda ko‘proq kontent bor.
Misol
<div class="w3-cell-row">
<div class="w3-cell w3-container">
<p>Short cell.</p>
</div>
<div class="w3-cell w3-container">
<p>This cell contains more content than the first cell.</p>
</div>
</div>
O‘zingiz sinab ko‘ring »
Eslatma
Flexbox ham flex xususiyati yordamida mavjud kenglikni taqsimlay oladi.
Katakchalar bir xil balandlikka ega
Bir qatordagi katakchalar avtomatik ravishda bir xil balandlikka ega bo‘ladi.
Qisqa katakcha.
Ko‘proq kontent.
Ko‘proq kontent.
Ko‘proq kontent.
Misol
<div class="w3-cell-row">
<div class="w3-cell w3-container">
<p>Short cell.</p>
</div>
<div class="w3-cell w3-container">
<p>More content.</p>
<p>More content.</p>
<p>More content.</p>
</div>
</div>
O‘zingiz sinab ko‘ring »
Vertikal tekislash
W3.CSS katakchalarni vertikal tekislash uchun uchta klassni taqdim etadi:
w3-cell-topw3-cell-middlew3-cell-bottom
Yuqori
O‘rta
Pastki
Misol
<div class="w3-cell-row">
<div class="w3-cell w3-container w3-cell-top">Top</div>
<div class="w3-cell w3-container w3-cell-middle">Middle</div>
<div class="w3-cell w3-container w3-cell-bottom">Bottom</div>
</div>
O‘zingiz sinab ko‘ring »
Moslashuvchan katakchalar
w3-mobile klassi katakchalarni moslashuvchan qiladi.
Katakchalar o‘rta va katta ekranlarda yonma-yon, kichik ekranlarda esa ustma-ust ko‘rsatiladi.
Hello W3.CSS Cell.
Hello W3.CSS Cell.
Hello W3.CSS Cell.
Misol
<div class="w3-cell-row">
<div class="w3-cell w3-container w3-mobile">1</div>
<div class="w3-cell w3-container w3-mobile">2</div>
<div class="w3-cell w3-container w3-mobile">3</div>
</div>
O‘zingiz sinab ko‘ring »
Moslashuvchan maketlar haqida keyingi bobda ko‘proq bilib olasiz.
Katakchalar, qatorlar va Flexbox
| Maket | Eng mos holatlar |
|---|---|
| Katakchalar (cells) | Vertikal tekislanadigan, bir xil balandlikdagi oddiy ustunlar |
| Qatorlar (rows) | Oddiy yarimlar, uchdan birlar va choraklar |
| Flexbox | Zamonaviy bir o‘lchamli maketlar va tekislash |
Katakchalar bir xil balandlik yoki vertikal tekislash talab qilinadigan oddiy maketlar uchun qulay.
Flexbox ko‘pchilik zamonaviy maketlar uchun ko‘proq nazorat imkonini beradi.
Katakchalar qatorining kengligi
Katakchalar qatorining kengligini CSS yordamida o‘zgartirish mumkin.
Misol
<div class="w3-cell-row" style="width:75%">
<div class="w3-cell">Cell</div>
<div class="w3-cell">Cell</div>
</div>
Katakchalarni aralash tekislash
Misol
<div class="w3-cell-row">
<div class="w3-cell w3-cell-top">Top</div>
<div class="w3-cell w3-cell-middle">Middle</div>
<div class="w3-cell w3-cell-bottom">Bottom</div>
</div>
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!