Div elementi
<div> elementi boshqa HTML elementlari uchun konteyner sifatida ishlatiladi.
<div>
elementi
<div>
elementi<div>
elementi default tarzda blok element hisoblanadi, u mavjud barcha bo'sh joylarni to'liq egallab oladi.
Lorem Ipsum <div>I am a div</div> dolor sit amet.

<div>
elementida talab qilinadigan atribut yo'q, lekin style
, class
va id
kabi ixtiyor atributlarni berish mumkin.
Konteyner sifatida <div>
<div>
<div>
elementi ko'pincha veb-sahifa bo'limlarini birga guruhlash uchun ishlatiladi.
<div>
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>London has over 13 million inhabitants.</p>
</div>

<div>
elementini o'rtaga joylashtirish
<div>
elementini o'rtaga joylashtirishAgar sizda kengligi 100% bo'lmagan <div>
elementi bo'lsa va uni o'rtaga olib kelishni xohlasangiz, CSSning margin
xususiyatini auto
qiling.
<style>
div {
width:300px;
margin:auto;
}
</style>

Bir qancha <div>
elementlari
<div>
elementlariBir sahifada bir nechta <div>
konteynerlari bo'lishi mumkin.
<div>
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>London has over 13 million inhabitants.</p>
</div>
<div>
<h2>Oslo</h2>
<p>Oslo is the capital city of Norway.</p>
<p>Oslo has over 600.000 inhabitants.</p>
</div>
<div>
<h2>Rome</h2>
<p>Rome is the capital city of Italy.</p>
<p>Rome has almost 3 million inhabitants.</p>
</div>

<div>
elementlarini yonma yon joylashtirish
<div>
elementlarini yonma yon joylashtirishVeb-sahifalarni yaratishda ko'pincha ikki yoki undan ortiq <div>
elementlarni yonma-yon qilish kerak bo'ladi, masalan:

Elementlarni yonma-yon tekislashning turli usullari mavjud, ularning barchasi ba'zi CSS uslublarini o'z ichiga oladi. Biz eng keng tarqalgan usullarni ko'rib chiqamiz:
Float
CSSning float
xususiyati dastlab <div>
elementlarini yonma-yon joylashtirish uchun mo'ljallanmagan, lekin yillar davomida shu maqsadda foydalanilgan.
CSSning float
xususiyati kontentni joylashtirish va formatlash uchun ishlatiladi va elementlar ustma ust emas, balki yonma-yon turishga imkon beradi.
<style>
.mycontainer {
width:100%;
overflow:auto;
}
.mycontainer div {
width:33%;
float:left;
}
</style>

Inline-block
Agar <div>
elementining displey
xususiyatini block
dan inline-block
ga o'zgartirsangiz, <div>
elementlari endi yonma-yon ko'rsatiladi.
<style>
div {
width: 30%;
display: inline-block;
}
</style>

Flex
CSS Flexbox Layout moduli float yoki pozitsiyadan foydalanmasdan moslashuvchan tartib tuzilmasini shakllantirishni osonlashtirish uchun taqdim qilingan.
CSSning flex xususiyati ishlashi uchun <div>
elementlarini boshqa <div>
elementi bilan o'rab oling va undan flexli konteyner sifatida foydalaning.
<style>
.mycontainer {
display: flex;
}
.mycontainer > div {
width:33%;
}
</style>

Grid
CSSning Grid Layout moduli qatorlar va ustunlar bilan gridga asosidagi layout tizimini taklif etadi, bu esa float
va pazitsiyalashdan foydalanmasdan turib veb-sahifalarni yaratishni osonlashtiradi.
Flex bilan deyarli bir xildek eshitiladi, lekin bir nechta qatorni tanlash va har bir qatorni alohida joylashtirish qobiliyatiga ega.
CSSning grid usuli sizdan <div>
elementlarini boshqa <div>
elementi bilan o'rash va grid konteyner holatiga ekltirishni talab qiladi va siz har bir ustunning kengligini belgilashingiz kerak.
<style>
.grid-container {
display: grid;
grid-template-columns: 33% 33% 33%;
}
</style>

HTML teglari
Sahifada bo'lim yaratish (block-level)
Last updated