HTML div elementi
<div> elementi boshqa HTML elementlari uchun konteyner sifatida ishlatiladi.
<div> elementi
<div> elementi standart holda blok
(element) hisoblanadi, ya’ni u mavjud bo‘lgan butun kenglikni egallaydi va undan oldin va keyin satr uzilishlari bilan keladi.
Misol
<div> elementi mavjud barcha kenglikni egallaydi:
Lorem Ipsum <div>I am a div</div> dolor sit amet.
Natija
O‘zingiz sinab ko‘ring »
<div> elementining majburiy atributlari yo‘q, lekin style, class va id keng tarqalgan.
<div> — konteyner sifatida
<div> elementi ko‘pincha veb-sahifa bo‘limlarini birga guruhlash uchun ishlatiladi.
Misol
Ichida HTML elementlari bo‘lgan <div> elementi:
<div>
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>London has over 9 million inhabitants.</p>
</div>
Natija
London
London — Angliyaning poytaxti.
London aholisi 9 milliondan ortiq.
O‘zingiz sinab ko‘ring »
<div> elementini markazga tekislash
Agar <div> elementining kengligi 100% bo‘lmasa va uni markazga joylashtirmoqchi bo‘lsangiz, CSS margin xossasini auto qilib belgilang.
Misol
<style>
div {
width:300px;
margin:auto;
}
</style>
Natija
London
London — Angliyaning poytaxti.
London aholisi 9 milliondan ortiq.
O‘zingiz sinab ko‘ring »
Bir nechta <div> elementlar
Bir sahifada ko‘plab <div> konteynerlarga ega bo‘lishingiz mumkin.
Misol
<div>
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>London has over 9 million inhabitants.</p>
</div>
<div>
<h2>Oslo</h2>
<p>Oslo is the capital city of
Norway.</p>
<p>Oslo has over 700,000 inhabitants.</p>
</div>
<div>
<h2>Rome</h2>
<p>Rome is the capital city of
Italy.</p>
<p>Rome has over 4 million inhabitants.</p>
</div>
Natija
London
London — Angliyaning poytaxti.
London aholisi 9 milliondan ortiq.
Oslo
Oslo — Norvegiyaning poytaxti.
Oslo aholisi 700,000 dan ortiq.
Rome
Rim — Italiyaning poytaxti.
Rim aholisi 4 milliondan ortiq.
O‘zingiz sinab ko‘ring »
<div> elementlarni yonma-yon tekislash
Veb-sahifalar qurishda ko‘pincha ikki yoki undan ko‘proq <div> elementini yonma-yon joylashtirishni xohlaysiz, xuddi shunday:
London
London — Angliyaning poytaxti.
London aholisi 9 milliondan ortiq.
Oslo
Oslo — Norvegiyaning poytaxti.
Oslo aholisi 700,000 dan ortiq.
Rome
Rim — Italiyaning poytaxti.
Rim aholisi 4 milliondan ortiq.
Elementlarni yonma-yon joylashtirishning turli usullari mavjud, ularning barchasi bir qancha CSS uslublarini o‘z ichiga oladi. Eng ko‘p ishlatiladigan usullarni ko‘rib chiqamiz:
Float
CSS float xususiyati dastlab <div> elementlarini
yonma-yon joylashtirish uchun mo‘ljallanmagan edi,
lekin ko‘p yillar davomida aynan shu maqsadda ishlatilgan.
CSS float xususiyati kontentni joylashtirish va formatlash uchun ishlatiladi hamda elementlarni vertikal emas, balki gorizontal joylashtirish imkonini beradi.
Misol
Div elementlarini yonma-yon joylashtirish uchun float’dan qanday foydalanish:
<style>
.mycontainer {
width:100%;
overflow:auto;
}
.mycontainer div {
width:33%;
float:left;
}
</style>
Natija
London
London — Angliyaning poytaxti.
London aholisi 9 milliondan ortiq.
Oslo
Oslo — Norvegiyaning poytaxti.
Oslo aholisi 700,000 dan ortiq.
Rome
Rim — Italiyaning poytaxti.
Rim aholisi 4 milliondan ortiq.
O‘zingiz sinab ko‘ring »
Float haqida bizning CSS float darsligimizda ko‘proq o‘rganing.
Inline-block
Agar <div> elementining display xususiyatini
block dan inline-block ga
o‘zgartirsangiz, <div> elementlari endi oldin va keyin satr uzilishi qo‘shmaydi va bir-birining ustiga emas, balki yonma-yon ko‘rsatiladi.
Misol
Div elementlarini yonma-yon joylashtirish uchun display: inline-block’dan qanday foydalanish:
<style>
div {
width: 30%;
display:
inline-block;
}
</style>
Natija
London
London — Angliyaning poytaxti.
London aholisi 9 milliondan ortiq.
Oslo
Oslo — Norvegiyaning poytaxti.
Oslo aholisi 700,000 dan ortiq.
Rome
Rim — Italiyaning poytaxti.
Rim aholisi 4 milliondan ortiq.
O‘zingiz sinab ko‘ring »
Flex
CSS Flexbox Layout Module float yoki joylashuvdan (positioning) foydalanmasdan moslashuvchan (flexible) responsive maket tuzilmasini loyihalashni osonlashtirish uchun taqdim etilgan.
CSS flex usulini ishlatish uchun <div> elementlarini boshqa
<div> elementi bilan o‘rang va unga flex konteyner statusini bering.
Misol
Div elementlarini yonma-yon joylashtirish uchun flex’dan qanday foydalanish:
<style>
.mycontainer {
display: flex;
}
.mycontainer
> div {
width:33%;
}
</style>
Natija
London
London — Angliyaning poytaxti.
London aholisi 9 milliondan ortiq.
Oslo
Oslo — Norvegiyaning poytaxti.
Oslo aholisi 700,000 dan ortiq.
Rome
Rim — Italiyaning poytaxti.
Rim aholisi 4 milliondan ortiq.
O‘zingiz sinab ko‘ring »
Flex haqida bizning CSS flexbox darsligimizda ko‘proq o‘rganing.
Grid
CSS Grid Layout moduli qator va ustunlarga asoslangan panjara (grid) maket tizimini taklif etadi, bu esa float va joylashtirishdan (positioning) foydalanmasdan veb-sahifalarni loyihalashni osonlashtiradi.
Bu deyarli flex bilan bir xil tuyuladi, lekin bir nechta qatorni belgilash va har bir qatorni alohida joylashtirish imkoniyatiga ega.
CSS grid usuli
<div> elementlarini boshqa <div> elementi bilan o‘rashingizni va unga grid konteyner statusini berishingizni talab qiladi, shuningdek har bir ustunning kengligini belgilashingiz shart.
Misol
<div> elementlarini yonma-yon joylashtirish uchun grid’dan qanday foydalanish:
<style>
.grid-container {
display: grid;
grid-template-columns: 33% 33% 33%;
}
</style>
Natija
London
London — Angliyaning poytaxti.
London aholisi 9 milliondan ortiq.
Oslo
Oslo — Norvegiyaning poytaxti.
Oslo aholisi 700,000 dan ortiq.
Rome
Rim — Italiyaning poytaxti.
Rim aholisi 4 milliondan ortiq.
O‘zingiz sinab ko‘ring »
Grid haqida bizning CSS grid darsligimizda ko‘proq o‘rganing.
HTML teglari
| Tag | Tavsif |
|---|---|
| <div> | Hujjatdagi bo‘limni belgilaydi (blok darajasidagi) |
Barcha mavjud HTML teglarining to‘liq ro‘yxati uchun HTML teglar ma’lumotnomamizga murojaat qiling.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!