عنصر <div> هو حاوية متعددة الاستخدامات في صفحات HTML. يُستخدم بشكل أساسي لتجميع عناصر أخرى داخلها، وترتيبها وتنسيقها ضمن الصفحة.
خصائص <div>:
- عنصر كتلة (Block Element): هذا يعني أنه يبدأ على سطر جديد ويحتل العرض الكامل المتاح له في ذلك السطر. كما تضاف له هامش (Margin) وفراغ (Padding) بشكل افتراضي قبل وبعد المحتوى.
- حاوية عامة (Generic Container): ليس له دلالة محددة، ويمكن استخدامه لتجميع أي نوع من العناصر تقريبًا.
- تحكم مرن في التنسيق (Flexible Styling): يمكن تخصيص مظهره وتنسيقه باستخدام CSS.
مثال:
عنصر <div> يشغل العرض المتاح بالكامل:
Lorem Ipsum <div>I am a div</div> dolor sit amet.النتيجه
عنصر <div> لا يحتاج إلى صفات محددة (attributes)، لكن استخدام صفات مثل style و class و id شائع جدًا.
<div> كحاوية
عنصر <div> يُستخدم بشكل رئيسي لتجميع أقسام من صفحة الويب معًا. بمعنى آخر، أنه بمثابة حاوية يمكن وضع عناصر HTML أخرى بداخله لتشكيل أقسام مترابطة.
مثال:
<div>
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>London has over 13 million inhabitants.</p>
</div>النتيجه
محاذاة عنصر <div> إلى الوسط:
إذا كان لديك عنصر <div> ليس بعرض 100% وتريد محاذاة محتواه إلى الوسط، فاستخدم خاصية margin في CSS وقم بتعيين قيمتها إلى auto.
مثال:
<style>
div {
width:300px;
margin:auto;
}
</style>نتيجه
عدة عناصر <div> في الصفحة:
يمكنك استخدام العديد من حاويات <div> في نفس صفحة الويب. فهي بمثابة “صناديق” يمكنك وضع عناصر 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>
النتيجه
محاذاة عناصر <div> جنبًا إلى جنب
عند تصميم صفحات الويب، غالبًا ما ترغب في وضع عنصرين أو أكثر من عناصر <div> جنبًا إلى جنب، كما هو موضح هنا:
هناك طرق مختلفة لمحاذاة العناصر جنبًا إلى جنب، وكلها تتضمن بعضًا من تنسيقات CSS
خاصية float
خاصية float في CSS لم تُصمم في الأصل لمحاذاة عناصر <div> جنبًا إلى جنب، لكنها تُستخدم لهذا الغرض منذ سنوات عديدة.
تستخدم خاصية float في CSS لتحديد وضع وتنسيق المحتوى، ويمكنها جعل العناصر تطفو بجوار بعضها بدلاً من ظهورها فوق بعضها.
مثال:
كيفية استخدام float لمحاذاة عناصر <div> جنبًا إلى جنب:
<style>
.mycontainer {
width:100%;
overflow:auto;
}
.mycontainer div {
width:33%;
float:left;
}
</style>
خاصيه inline-block
إذا قمت بتغيير خاصية display لعنصر <div> من block إلى inline-block، فلن تتسبب عناصر <div> في إضافة سطر جديد قبل وبعد نفسها، وسيظهرون جنبًا إلى جنب بدلاً من فوق بعضهم.
كيفية استخدام display: inline-block لمحاذاة عناصر <div> جنبًا إلى جنب:
مثال:
<style>
div {
width: 30%;
display: inline-block;
}
</style>
النتيجه
نموذج Flexbox في CSS
تم تطوير نموذج Flexbox في CSS لتسهيل تصميم تخطيطات استجابة مرنة وفعالة، دون الحاجة لاستخدام خاصية float أو التموضع اليدوي.
استخدام Flexbox:
لجعل طريقة Flexbox تعمل، احط عناصر <div> بعنصر <div> آخر وامنحه صفة “حاوية مرنة (flex container)”.
مثال:
كيفية استخدام Flex لمحاذاة عناصر <div> جنبًا إلى جنب:
<style>
.mycontainer {
display: flex;
}
.mycontainer > div {
width:33%;
}
</style>
نموذج Grid في CSS
يقدم نموذج Grid في CSS نظامًا لإنشاء تخطيطات مبنية على شبكة من الصفوف والأعمدة، مما يسهل تصميم صفحات الويب دون الحاجة إلى استخدام خاصية float أو التموضع اليدوي.
قد يبدو مشابهًا لـ Flex، لكنه يتميز بإمكانية تحديد أكثر من صف وتحديد موضع كل صف بشكل منفصل.
استخدام Grid:
لجعل طريقة Grid تعمل، احط عناصر <div> بعنصر <div> آخر وامنحه صفة “حاوية شبكة (grid container)”، بالإضافة إلى تحديد عرض كل عمود.
مثال:
كيفية استخدام Grid لمحاذاة عناصر <div> جنبًا إلى جنب:
<style>
.grid-container {
display: grid;
grid-template-columns: 33% 33% 33%;
}
</style>
