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 blockdan inline-blockga 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