# Div elementi

## <mark style="color:green;">`<div>`</mark> <mark style="color:green;">elementi</mark>

<mark style="color:red;">`<div>`</mark> elementi default tarzda blok element hisoblanadi, u mavjud barcha bo'sh joylarni to'liq egallab oladi.

{% code title="<div> elementi mavjud barcha joyni egallab oladi:" %}

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

{% endcode %}

<figure><img src="/files/XDr9nZZdiXW0YACnqkQT" alt=""><figcaption></figcaption></figure>

{% embed url="<https://www.w3schools.com/html/tryit.asp?filename=tryhtml_div1>" %}

<mark style="color:red;">`<div>`</mark> elementida talab qilinadigan atribut yo'q, lekin <mark style="color:red;">`style`</mark>, <mark style="color:red;">`class`</mark> va <mark style="color:red;">`id`</mark> kabi ixtiyor atributlarni berish mumkin.

## <mark style="color:green;">Konteyner sifatida</mark> <mark style="color:green;">`<div>`</mark>

<mark style="color:red;">`<div>`</mark> elementi ko'pincha veb-sahifa bo'limlarini birga guruhlash uchun ishlatiladi.

{% code title="HTML elementlari bilan <div> elementidan foydalanish:" %}

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

{% endcode %}

<figure><img src="/files/vstSkiSfOJvM3VhABVnL" alt=""><figcaption></figcaption></figure>

{% embed url="<https://www.w3schools.com/html/tryit.asp?filename=tryhtml_div2>" %}

## <mark style="color:green;">`<div>`</mark> <mark style="color:green;">elementini o'rtaga joylashtirish</mark>

Agar sizda kengligi 100% bo'lmagan <mark style="color:red;">`<div>`</mark> elementi bo'lsa va uni o'rtaga olib kelishni xohlasangiz, CSSning <mark style="color:red;">`margin`</mark> xususiyatini <mark style="color:red;">`auto`</mark> qiling.

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

<figure><img src="/files/LAPYCC654gZX0TnlvwsM" alt=""><figcaption></figcaption></figure>

{% embed url="<https://www.w3schools.com/html/tryit.asp?filename=tryhtml_div3>" %}

## <mark style="color:green;">Bir qancha</mark> <mark style="color:green;">`<div>`</mark> <mark style="color:green;">elementlari</mark>

Bir sahifada bir nechta <mark style="color:red;">`<div>`</mark> konteynerlari bo'lishi mumkin.

```html
<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> 
```

<figure><img src="/files/2hWcWJ9SZON4sEd8A062" alt=""><figcaption></figcaption></figure>

{% embed url="<https://www.w3schools.com/html/tryit.asp?filename=tryhtml_div4>" %}

## <mark style="color:green;">`<div>`</mark> <mark style="color:green;">elementlarini yonma yon joylashtirish</mark>

Veb-sahifalarni yaratishda ko'pincha ikki yoki undan ortiq <mark style="color:red;">`<div>`</mark> elementlarni yonma-yon qilish kerak bo'ladi, masalan:

<figure><img src="/files/YHjjlwjbGZp8OiCkaUrQ" alt=""><figcaption></figcaption></figure>

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:

## <mark style="color:green;">Float</mark>

CSSning <mark style="color:red;">`float`</mark> xususiyati dastlab <mark style="color:red;">`<div>`</mark> elementlarini yonma-yon joylashtirish uchun mo'ljallanmagan, lekin yillar davomida shu maqsadda foydalanilgan.

CSSning <mark style="color:red;">`float`</mark> xususiyati kontentni joylashtirish va formatlash uchun ishlatiladi va elementlar ustma ust emas, balki yonma-yon turishga imkon beradi.

```html
<style>
.mycontainer {
  width:100%;
  overflow:auto;
}
.mycontainer div {
  width:33%;
  float:left;
}
</style> 
```

<figure><img src="/files/04hA7qSdTiQAQRlgM6WQ" alt=""><figcaption></figcaption></figure>

{% embed url="<https://www.w3schools.com/html/tryit.asp?filename=tryhtml_div_float>" %}

## <mark style="color:green;">Inline-block</mark>

Agar <mark style="color:red;">`<div>`</mark> elementining <mark style="color:red;">`displey`</mark> xususiyatini <mark style="color:red;">`block`</mark>dan <mark style="color:red;">`inline-block`</mark>ga o'zgartirsangiz, <mark style="color:red;">`<div>`</mark> elementlari endi yonma-yon ko'rsatiladi.

{% code title="Div elementlarini yonma-yon joylashtirish uchun display:inline-blockdan qanday foydalanish kerak:" %}

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

{% endcode %}

<figure><img src="/files/UQ2w8e5aNdRUCrP0xhQp" alt=""><figcaption></figcaption></figure>

{% embed url="<https://www.w3schools.com/html/tryit.asp?filename=tryhtml_div_inline-block>" %}

## <mark style="color:green;">Flex</mark>

CSS Flexbox Layout moduli float yoki pozitsiyadan foydalanmasdan moslashuvchan tartib tuzilmasini shakllantirishni osonlashtirish uchun taqdim qilingan.

CSSning flex xususiyati ishlashi uchun <mark style="color:red;">`<div>`</mark> elementlarini boshqa <mark style="color:red;">`<div>`</mark> elementi bilan o'rab oling va undan flexli konteyner sifatida foydalaning.

{% code title="Div elementlarini yonma yon qilish uchun flexdan foydalanish:" %}

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

{% endcode %}

<figure><img src="/files/1xJ6kToA7hdgWrEIp5S8" alt=""><figcaption></figcaption></figure>

{% embed url="<https://www.w3schools.com/html/tryit.asp?filename=tryhtml_div_flex>" %}

## <mark style="color:green;">Grid</mark>

CSSning Grid Layout moduli qatorlar va ustunlar bilan gridga asosidagi layout tizimini taklif etadi, bu esa <mark style="color:red;">`float`</mark> 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 <mark style="color:red;">`<div>`</mark> elementlarini boshqa <mark style="color:red;">`<div>`</mark> elementi bilan o'rash va grid konteyner holatiga ekltirishni talab qiladi va siz har bir ustunning kengligini belgilashingiz kerak.

{% code title="Div elementlarini yonma yon qilish uchun griddan foydalanish:" %}

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

{% endcode %}

<figure><img src="/files/dluIvuq1dvg4SmWGEPam" alt=""><figcaption></figcaption></figure>

{% embed url="<https://www.w3schools.com/html/tryit.asp?filename=tryhtml_div_grid>" %}

## <mark style="color:green;">HTML teglari</mark>

| Tag                                                  | Description                            |
| ---------------------------------------------------- | -------------------------------------- |
| [\<div>](https://www.w3schools.com/tags/tag_div.asp) | Sahifada bo'lim yaratish (block-level) |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://cyberacademyuz.gitbook.io/w3schools/html/boshlash/div-elementi.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.