المان div (Div)
المان div یک «ظرف (Container)» برای گروه بندی عناصر است. معمولاً بلوکی است؛ یعنی از خط جدید شروع می شود و کل عرض را می گیرد. تصورش کن مثل جعبه کفش که وسایل مرتبط را کنار هم نگه می دارد.
div چیست و چرا بلوکی است؟
div به صورت پیش فرض «بلوک (Block)» است. بنابراین قبل و بعدش شکست خط می آید و عرضِ موجود را می گیرد.
Lorem Ipsum
<div>I am a div</div>
dolor sit amet.
div به عنوان ظرف (Container)
خیلی وقت ها یک بخش صفحه را با div می پیچیم. سپس تیتر و پاراگراف ها را داخلش می گذاریم.
<div>
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>London has over 9 million inhabitants.</p>
</div>
وسط چین کردن div با margin:auto
اگر div تمام عرض نیست، با margin: auto آن را وسط ببر.
<style>
.box {
width: 300px;
margin: auto;
}
</style>
<div class="box">
<h2>London</h2>
<p>London is the capital city of England.</p>
</div>
چند div در یک صفحه
می توانی چند ظرف مجزا داشته باشی؛ هرکدام برای یک بخش.
<div>
<h2>London</h2>
<p>Capital of England.</p>
</div>
<div>
<h2>Oslo</h2>
<p>Capital of Norway.</p>
</div>
<div>
<h2>Rome</h2>
<p>Capital of Italy.</p>
</div>
چیدن div ها کنار هم
برای قرارگیری افقی، راه های رایج: Float، Inline-block، Flex، Grid.
روش Float
Float قدیمی است اما هنوز کاربردی است.
<style>
.mycontainer {
width: 100%;
overflow: auto;
}
.mycontainer div {
width: 33%;
float: left;
}
</style>
<div class="mycontainer">
<div>London</div>
<div>Oslo</div>
<div>Rome</div>
</div>
روش Inline-block
Display را inline-block کن تا کنار هم بیایند.
<style>
.card {
width: 30%;
display: inline-block;
}
</style>
<div class="card">London</div>
<div class="card">Oslo</div>
<div class="card">Rome</div>
روش Flex
Flexbox چیدمان واکنش گرا را ساده می کند.
<style>
.row {
display: flex;
}
.row > div {
width: 33%;
}
</style>
<div class="row">
<div>London</div>
<div>Oslo</div>
<div>Rome</div>
</div>
روش Grid
Grid سطر و ستون مشخص دارد و بسیار دقیق است.
<style>
.grid {
display: grid;
grid-template-columns: 33% 33% 33%;
}
</style>
<div class="grid">
<div>London</div>
<div>Oslo</div>
<div>Rome</div>
</div>
سه گام تمرینی
- یک div ظرف بساز و تیتر بده.
- با margin:auto آن را وسط ببر.
- سه کارت کنار هم با Flex بساز.
مسیر ادامه یادگیری المان div
برای شناخت رفتار بلوکی، صفحه بلوک ها و درون خطی ها را ببین. سپس برای استایل دهی گروهی، سر بزن به کلاس ها در HTML.
جمع بندی سریع
- div یک ظرفِ بلوکی است.
- وسط چینی با margin:auto ساده است.
- چیدمان کنارهم با Float، Inline-block، Flex، Grid ممکن است.
- برای ساخت بخش ها، از div شروع کن.