HTML <div> elementi

<div> elementi boshqa HTML elementlarini o'z ichiga oluvchi konteyner sifatida ishlatiladi.

---

<div> elementi

<div> elementi odatda blok element hisoblanadi, ya'ni u mavjud kenglikni to'liq egallaydi va oldidan ham, keyin ham yangi qatordan boshlanadi.

::: example Misol:
<div> elementi butun kenglikni egallaydi:

Lorem Ipsum <div>Men divman</div>
dolor sit amet.

Natija:

Lorem Ipsum

Men divman

dolor sit amet.

:::

<div> elementida majburiy atributlar yo'q, lekin style, class va id ko'p ishlatiladi.

---

<div> konteyner sifatida

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

::: example Misol:
HTML elementlari bilan <div>:

<div>
  <h2>London</h2>
  <p>London Angliyaning poytaxti.</p>
  <p>Londonda 9 milliondan ortiq aholi yashaydi.</p>
</div>

Natija:

London

London Angliyaning poytaxti.

Londonda 9 milliondan ortiq aholi yashaydi.

:::

---

<div> elementini markazga joylashtirish

Agar <div> elementi 100% kenglikda bo'lmasa va uni markazga joylashtirmoqchi bo'lsangiz, CSS margin xususiyatini auto qilib belgilang.

::: example Misol:

<style>
div {
  width:300px;
  margin:auto;
}
</style>

Natija:

London

London Angliyaning poytaxti.

Londonda 9 milliondan ortiq aholi yashaydi.

:::

---

Bir nechta <div> elementlari

Bir sahifada bir nechta <div> konteynerlardan foydalanishingiz mumkin.

::: example Misol:

<div>
  <h2>London</h2>
  <p>London Angliyaning poytaxti.</p>
  <p>Londonda 9 milliondan ortiq aholi yashaydi.</p>
</div>

<div>
  <h2>Oslo</h2>
  <p>Oslo Norvegiyaning poytaxti.</p>
  <p>Oslo shahrida 700 000 dan ortiq aholi yashaydi.</p>
</div>

<div>
  <h2>Rim</h2>
  <p>Rim Italiya poytaxti.</p>
  <p>Rimda 4 milliondan ortiq aholi yashaydi.</p>
</div>

Natija:

London

London Angliyaning poytaxti.

Londonda 9 milliondan ortiq aholi yashaydi.

Oslo

Oslo Norvegiyaning poytaxti.

Oslo shahrida 700 000 dan ortiq aholi yashaydi.

Rim

Rim Italiya poytaxti.

Rimda 4 milliondan ortiq aholi yashaydi.

:::

---

<div> elementlarini yonma-yon joylashtirish

Veb sahifa yaratishda ko'pincha bir nechta <div> elementlarini yonma-yon joylashtirish talab qilinadi:

::: example Misol (CSS Grid):

<style>
.grid-konteyner {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.grid-konteyner div {
  padding:10px;
}
</style>
<div class="grid-konteyner">
  <div style="background-color:#FFF4A3;color:#000">
    <h2>London</h2>
    <p>London Angliyaning poytaxti.</p>
    <p>Londonda 9 milliondan ortiq aholi yashaydi.</p>
  </div>
  <div style="background-color:#FFC0C7;color:#000">
    <h2>Oslo</h2>
    <p>Oslo Norvegiyaning poytaxti.</p>
    <p>Oslo shahrida 700 000 dan ortiq aholi yashaydi.</p>
  </div>
  <div style="background-color:#D9EEE1;color:#000">
    <h2>Rim</h2>
    <p>Rim Italiya poytaxti.</p>
    <p>Rimda 4 milliondan ortiq aholi yashaydi.</p>
  </div>
</div>

:::

Elementlarni yonma-yon joylashtirish uchun turli usullar mavjud, barchasi CSS uslublaridan foydalanadi.
Eng ko'p ishlatiladigan usullar quyidagilar:

---

1. Float

CSS float xususiyati dastlab <div> elementlarini yonma-yon joylashtirish uchun mo'ljallanmagan, lekin ko'p yillar davomida shu maqsadda ishlatilgan.

CSS float xususiyati elementlarni gorizontal joylashtirish va formatlash uchun ishlatiladi.

::: example Misol:

<style>
mening-konteynerim {
  width:100%;
  overflow:auto;
}
mening-konteynerim div {
  width:33%;
  float:left;
}
</style>
<div class="mening-konteynerim">
  <div style="background-color:#FFF4A3;color:#000">
    <h2>London</h2>
    <p>London Angliyaning poytaxti.</p>
    <p>Londonda 9 milliondan ortiq aholi yashaydi.</p>
  </div>
  <div style="background-color:#FFC0C7;color:#000">
    <h2>Oslo</h2>
    <p>Oslo Norvegiyaning poytaxti.</p>
    <p>Oslo shahrida 700 000 dan ortiq aholi yashaydi.</p>
  </div>
  <div style="background-color:#D9EEE1;color:#000">
    <h2>Rim</h2>
    <p>Rim Italiya poytaxti.</p>
    <p>Rimda 4 milliondan ortiq aholi yashaydi.</p>
  </div>
</div>

:::

Float haqida batafsil CSS float darsligida o'qishingiz mumkin.

---

2. Inline-block

Agar <div> elementining display xususiyatini blockdan inline-blockga o'zgartirsangiz, <div> elementlari endi yangi qatordan boshlanmaydi va yonma-yon ko'rsatiladi.

::: example Misol:

<style>
div {
  width: 30%;
  display: inline-block;
}
</style>
<div style="background-color:#FFF4A3;color:#000">
  <h2>London</h2>
  <p>London Angliyaning poytaxti.</p>
  <p>Londonda 9 milliondan ortiq aholi yashaydi.</p>
</div>
<div style="background-color:#FFC0C7;color:#000">
  <h2>Oslo</h2>
  <p>Oslo Norvegiyaning poytaxti.</p>
  <p>Oslo shahrida 700 000 dan ortiq aholi yashaydi.</p>
</div>
<div style="background-color:#D9EEE1;color:#000">
  <h2>Rim</h2>
  <p>Rim Italiya poytaxti.</p>
  <p>Rimda 4 milliondan ortiq aholi yashaydi.</p>
</div>

:::

---

3. Flex

CSS Flexbox Layout Module yordamida moslashuvchan va responsiv tartibni oson yaratish mumkin.

Flex usulini ishlatish uchun <div> elementlarini boshqa <div> bilan o'rab, unga flex konteyner xususiyatini bering.

::: example Misol:

<style>
mening-konteynerim {
  display: flex;
}
mening-konteynerim > div {
  width:33%;
  padding:10px;
}
</style>
<div class="mening-konteynerim">
  <div style="background-color:#FFF4A3;color:#000">
    <h2>London</h2>
    <p>London Angliyaning poytaxti.</p>
    <p>Londonda 9 milliondan ortiq aholi yashaydi.</p>
  </div>
  <div style="background-color:#FFC0C7;color:#000">
    <h2>Oslo</h2>
    <p>Oslo Norvegiyaning poytaxti.</p>
    <p>Oslo shahrida 700 000 dan ortiq aholi yashaydi.</p>
  </div>
  <div style="background-color:#D9EEE1;color:#000">
    <h2>Rim</h2>
    <p>Rim Italiya poytaxti.</p>
    <p>Rimda 4 milliondan ortiq aholi yashaydi.</p>
  </div>
</div>

:::

Flex haqida batafsil CSS flexbox darsligida o'qishingiz mumkin.

---

4. Grid

CSS Grid Layout Module yordamida satr va ustunlardan iborat tartibni oson yaratish mumkin.

Grid usulini ishlatish uchun <div> elementlarini boshqa <div> bilan o'rab, unga grid konteyner xususiyatini bering va har bir ustun kengligini belgilang.

::: example Misol:

<style>
grid-konteyner {
  display: grid;
  grid-template-columns: 33% 33% 33%;
}
grid-konteyner div {
  padding:10px;
}
</style>
<div class="grid-konteyner">
  <div style="background-color:#FFF4A3;color:#000">
    <h2>London</h2>
    <p>London Angliyaning poytaxti.</p>
    <p>Londonda 9 milliondan ortiq aholi yashaydi.</p>
  </div>
  <div style="background-color:#FFC0C7;color:#000">
    <h2>Oslo</h2>
    <p>Oslo Norvegiyaning poytaxti.</p>
    <p>Oslo shahrida 700 000 dan ortiq aholi yashaydi.</p>
  </div>
  <div style="background-color:#D9EEE1;color:#000">
    <h2>Rim</h2>
    <p>Rim Italiya poytaxti.</p>
    <p>Rimda 4 milliondan ortiq aholi yashaydi.</p>
  </div>
</div>

:::

Grid haqida batafsil CSS grid darsligida o'qishingiz mumkin.

---

HTML teglar

Teg	Tavsifi
<div>	Hujjatda bo'limni belgilaydi (blok darajasida)

TIP

Barcha HTML teglar ro'yxatini HTML Teglar Ma'lumotnomasi sahifasida topishingiz mumkin.