عنصر div در HTML

عنصر <div> در HTML به عنوان یک کانتینر (Container) برای سایر عناصر استفاده می شود. این عنصر به صورت پیش فرض بلوکی (Block-level) است و همیشه کل عرض موجود را می گیرد. بنابراین مرورگر قبل و بعد از آن خط جدید ایجاد می کند.

ویژگی های عنصر div

عنصر <div> هیچ ویژگی اجباری ندارد. با این حال ویژگی های class، id و style معمولاً برای استایل دهی و شناسایی آن به کار می روند.

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

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

اگر یک <div> کمتر از 100% عرض داشته باشد، می توانید با margin: auto آن را وسط چین کنید.

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

چند div در یک صفحه

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

قرار دادن div ها کنار هم

برای قرار دادن چند <div> در کنار هم، روش های مختلفی وجود دارد که همگی با CSS امکان پذیر هستند. رایج ترین روش ها شامل استفاده از float، inline-block، flex و grid می باشند.

استفاده از float

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

بیشتر بخوانید: آموزش float در CSS

استفاده از inline-block

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

استفاده از Flexbox

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

بیشتر بخوانید: آموزش Flexbox در CSS

استفاده از Grid

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

بیشتر بخوانید: آموزش Grid در CSS

خلاصه

• عنصر <div> یک عنصر بلوکی است و به عنوان کانتینر استفاده می شود.
• ویژگی های پرکاربرد آن شامل class، id و style است.
• می توان آن را با CSS در مرکز صفحه یا کنار سایر div ها قرار داد.
• چهار روش اصلی چینش div ها: float، inline-block، flex و grid هستند.

برای ادامه مطالعه به بخش عناصر بلوکی و درون خطی در HTML و کلاس ها در HTML مراجعه کنید.