Div elementi

<div> elementi boshqa HTML elementlari uchun konteyner sifatida ishlatiladi.

<div> elementi

<div> elementi default tarzda blok element hisoblanadi, u mavjud barcha bo'sh joylarni to'liq egallab oladi.

<div> elementi mavjud barcha joyni egallab oladi:

Lorem Ipsum <div>I am a div</div> dolor sit amet. 

W3Schools online HTML editorwww.w3schools.com

<div> elementida talab qilinadigan atribut yo'q, lekin style, class va id kabi ixtiyor atributlarni berish mumkin.

Konteyner sifatida <div>

<div> elementi ko'pincha veb-sahifa bo'limlarini birga guruhlash uchun ishlatiladi.

HTML elementlari bilan <div> elementidan foydalanish:

<div>
  <h2>London</h2>
  <p>London is the capital city of England.</p>
  <p>London has over 13 million inhabitants.</p>
</div> 

W3Schools online HTML editorwww.w3schools.com

<div> elementini o'rtaga joylashtirish

Agar 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> 

W3Schools online HTML editorwww.w3schools.com

Bir qancha <div> elementlari

Bir 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> 

W3Schools online HTML editorwww.w3schools.com

<div> elementlarini yonma yon joylashtirish

Veb-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> 

W3Schools online HTML editorwww.w3schools.com

Inline-block

Agar <div> elementining displey xususiyatini blockdan inline-blockga o'zgartirsangiz, <div> elementlari endi yonma-yon ko'rsatiladi.

Div elementlarini yonma-yon joylashtirish uchun display:inline-blockdan qanday foydalanish kerak:

<style>
div {
  width: 30%;
  display: inline-block;
}
</style> 

W3Schools online HTML editorwww.w3schools.com

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.

Div elementlarini yonma yon qilish uchun flexdan foydalanish:

<style>
.mycontainer {
  display: flex;
}
.mycontainer > div {
  width:33%;
}
</style> 

W3Schools online HTML editorwww.w3schools.com

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.

Div elementlarini yonma yon qilish uchun griddan foydalanish:

<style>
.grid-container {
  display: grid;
  grid-template-columns: 33% 33% 33%;
}
</style> 

W3Schools online HTML editorwww.w3schools.com

HTML teglari

Tag	Description
<div>	Sahifada bo'lim yaratish (block-level)