عنصر divدر HTML

عنصر <div> در HTML

 عنصر <div> به عنوان یک کانیتنر (Container) یا ظرف برای سایر عناصر HTML استفاده می‌شود.

عنصر <div>

عنصر <div> به طور پیش‌فرض یک عنصر بلوکی (Block Element) است، به این معنی که تمام عرض موجود را اشغال می‌کند و قبل و بعد از آن یک خط‌شکست (Line break) ایجاد می‌شود.

مثال

یک عنصر <div> تمام عرض موجود را اشغال می‌کند:

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

نتیجه Lorem IpsumI am a div dolor sit amet.

عنصر <div> هیچ اتریبیوت (Attribute) یا ویژگی اجباری ندارد، اما style، class و id از موارد رایج هستند.

<div> به عنوان یک کانتینر

عنصر <div> اغلب برای گروه‌بندی بخش‌های یک صفحه‌ی وب با هم استفاده می‌شود.

مثال

یک عنصر <div> با عناصر HTML در داخل آن:

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

نتیجه London London is the capital city of England. London has over 9 million inhabitants.

چینش یک عنصر <div> در مرکز (Center align)

اگر یک عنصر <div> دارید که عرض آن ۱۰۰٪ نیست و می‌خواهید آن را در مرکز صفحه قرار دهید، ویژگی margin در CSS را روی auto تنظیم کنید.

مثال

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

نتیجه London London is the capital city of England. London has over 9 million inhabitants.

چندین عنصر <div>

شما می‌توانید چندین کانتینر <div> در یک صفحه داشته باشید.

مثال

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

<div>
  <h2>Oslo</h2>
  <p>Oslo is the capital city of Norway.</p>
  <p>Oslo has over 700,000 inhabitants.</p>
</div>

<div>
  <h2>Rome</h2>
  <p>Rome is the capital city of Italy.</p>
  <p>Rome has over 4 million inhabitants.</p>
</div>

نتیجه London London is the capital city of England. London has over 9 million inhabitants. Oslo Oslo is the capital city of Norway. Oslo has over 700,000 inhabitants. Rome Rome is the capital city of Italy. Rome has over 4 million inhabitants.

چینش عناصر <div> در کنار هم

هنگام ساخت صفحات وب، اغلب می‌خواهید دو یا چند عنصر <div> را در کنار هم قرار دهید، شبیه به این: London London is the capital city of England. London has over 9 million inhabitants. Oslo Oslo is the capital city of Norway. Oslo has over 700,000 inhabitants. Rome Rome is the capital city of Italy. Rome has over 4 million inhabitants.

روش‌های مختلفی برای چینش عناصر در کنار هم وجود دارد که همه‌ی آن‌ها شامل استایل‌دهی CSS هستند. ما به رایج‌ترین روش‌ها نگاهی می‌اندازیم:

Float (شناور)

ویژگی float در CSS در ابتدا برای چینش عناصر <div> در کنار هم طراحی نشده بود، اما سال‌هاست که برای این منظور استفاده می‌شود. ویژگی float در CSS برای موقعیت‌یابی و فرمت‌دهی محتوا استفاده می‌شود و به عناصر اجازه می‌دهد به جای چینش عمودی، به صورت افقی قرار بگیرند.

مثال

نحوه‌ی استفاده از float برای چینش عناصر div در کنار هم:

<style>
  .mycontainer {
    width: 100%;
    overflow: auto;
  }

  .mycontainer div {
    width: 33%;
    float: left;
  }
</style>

نتیجه London London is the capital city of England. London has over 9 million inhabitants. Oslo Oslo is the capital city of Norway. Oslo has over 700,000 inhabitants. Rome Rome is the capital city of Italy. Rome has over 4 million inhabitants.

Inline-block (بلاک درون‌خطی)

اگر ویژگی display عنصر <div> را از block به inline-block تغییر دهید، عناصر <div> دیگر قبل و بعد خود خط‌شکست ایجاد نمی‌کنند و به جای نمایش زیر هم، در کنار هم نمایش داده می‌شوند.

مثال

نحوه‌ی استفاده از display: inline-block برای چینش عناصر div در کنار هم:

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

نتیجه London London is the capital city of England. London has over 9 million inhabitants.  Oslo Oslo is the capital city of Norway. Oslo has over 700,000 inhabitants.  Rome Rome is the capital city of Italy. Rome has over 4 million inhabitants.

Flex (انعطاف‌پذیر)

ماژول CSS Flexbox Layout برای این معرفی شد که طراحی ساختار چیدمان انعطاف‌پذیر و واکنش‌گرا (Responsive) را بدون استفاده از float یا موقعیت‌یابی آسان‌تر کند. برای اینکه روش flex در CSS کار کند، باید عناصر <div> را با یک عنصر <div> دیگر احاطه کنید و به آن وضعیت کانتینر فلکس (Flex Container) بدهید.

مثال

نحوه‌ی استفاده از flex برای چینش عناصر div در کنار هم:

<style>
  .mycontainer {
    display: flex;
  }

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

نتیجه London London is the capital city of England. London has over 9 million inhabitants. Oslo Oslo is the capital city of Norway. Oslo has over 700,000 inhabitants. Rome Rome is the capital city of Italy. Rome has over 4 million inhabitants.

Grid (شبکه)

ماژول CSS Grid Layout یک سیستم چیدمان مبتنی بر شبکه با سطر و ستون ارائه می‌دهد که طراحی صفحات وب را بدون نیاز به استفاده از float و موقعیت‌یابی آسان‌تر می‌کند. این روش تقریباً شبیه flex به نظر می‌رسد، اما قابلیت تعریف بیش از یک سطر و موقعیت‌دهی جداگانه به هر سطر را دارد. روش grid در CSS نیازمند این است که عناصر <div> را با یک عنصر <div> دیگر احاطه کنید و به آن وضعیت کانتینر شبکه (Grid Container) بدهید و باید عرض هر ستون را مشخص کنید.

مثال

نحوه‌ی استفاده از grid برای چینش عناصر <div> در کنار هم:

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

نتیجه London London is the capital city of England. London has over 9 million inhabitants. Oslo Oslo is the capital city of Norway. Oslo has over 700,000 inhabitants. Rome Rome is the capital city of Italy. Rome has over 4 million inhabitants.

تگ‌های HTML

تگ توضیحات <div> بخش (Section) را در یک سند تعریف می‌کند (در سطح بلوکی)