توضح هذه المقالة المحاذاة الصحيحة لـ div مع أمثلة عملية باستخدام CSS.
- كيف تصحح محاذاة Div باستخدام CSS؟
- استخدام خاصية 'float'
- استخدام الخاصية 'الصحيحة'
- باستخدام Flex Layout
- باستخدام تخطيط الشبكة
كيف تصحح محاذاة Div باستخدام CSS؟
يمكن للمطور محاذاة كل عنصر أو صورة div بطريقة تجعل موقع الويب أكثر جاذبية. نظرًا لمرونتها العالية ، يمكن استخدام عناصر div بعدة طرق على صفحة الويب مثل تحديد أقسام الصفحة وإنشاء أعمدة وتغليف مجموعات من المحتوى ذي الصلة.
اتبع الطرق التالية لليمين محاذاة div:
الطريقة 1: استخدام خاصية 'float'
في ملف HTML ، أنشئ div وعيّن له فئة ' محاذاة لليمين '. يتم استخدام هذه الفئة و div في جميع أنحاء هذه المقالة.
< شعبة فصل = 'محاذاة إلى اليمين' >
< ص > هذا بعض المحتوى. < / ص >
< / شعبة >
الآن ، حدد فئة div ' محاذاة لليمين 'وتعيين خصائص CSS. يتم استخدام هذه الخصائص لتحسين التصور:
.align-to-right {
تعويم: صحيح ؛
الحشو: 10 بكسل ؛
خلفية- لون : وردي فاقع؛
}
في الكود أعلاه ، ' يطفو 'تم تعيين الخاصية إلى اليمين. إنه يطفو أو يحرك div في الاتجاه الصحيح على صفحة الويب. يتم تعيين خصائص المساحة المتروكة ولون الخلفية على ' 10 بكسل ' و ' وردي فاقع ' على التوالى.
بعد تجميع مقتطف الشفرة أعلاه ، تبدو صفحة الويب كما يلي:
يؤكد الناتج أعلاه أن div يتحرك في الاتجاه الصحيح.
الطريقة الثانية: استخدام الخاصية 'right'
في CSS ، حدد فئة div وقم بتعيين ' يمين 'إلى 0. وهي تضمن أن مسافة div المحددة من الجانب الأيمن تساوي صفرًا. ثم ، اضبط ' موضع 'الخاصية إلى' مطلق 'لجعل موضع div ثابتًا. في النهاية ، قم بتطبيق بعض خصائص التصميم للحصول على تصور أفضل:
.align-to-right{
يمين: 0 ؛
الموقف: مطلق.
الحشو: 10 بكسل ؛
خلفية- لون : أرجواني متوسط؛
}
بعد تنفيذ كود صفحة الويب تبدو كالتالي:
يوضح الإخراج أن div محاذي الآن إلى اليمين.
الطريقة الثالثة: استخدام Flex Layout
Flex هي الطريقة الأكثر فاعلية ، وهي تحافظ على التخطيط أثناء تغيير حجم النافذة. يمكن محاذاة div إلى اليمين باستخدام CSS ' فليكس لاوت ' ملكيات. يحتوي تخطيط Flex على العديد من الخصائص لأغراض مختلفة.
في ملف HTML ، قم بإنشاء div أصلي وداخله يتم إنشاء قسمين شقيقين. أيضًا ، قم بتعيين فئة فريدة لكل div:
< شعبة فصل = 'محاذاة إلى اليمين' >< شعبة فصل = 'محاذاة إلى اليسار' >
< ص > هذا أكثر محتوى . < / ص >
< / شعبة >
< شعبة فصل = 'منحاز إلى اليمين' >
< h1 > مرحبًا من Linuxhint < / h1 >
< / شعبة >
< / شعبة >
الآن داخل ' <ستايل> 'تضيف خصائص CSS التالية:
.align-to-right {العرض: فليكس ؛
يبرر- محتوى : الفضاء بين؛
}
. بمحاذاة اليمين {
محاذاة الذات: نهاية مرنة ؛
الحشو: 10 بكسل ؛
خلفية- لون : أرجواني متوسط؛
}
في الكود أعلاه ،
- تعيين ' ثني 'و' المسافة بين 'إلى' عرض ' و ' تبرير المحتوى '، على التوالي. هذه الخصائص تجعل div مرنًا وتضع مسافات متساوية بين divs الفرعية.
- ال ' محاذاة الذات 'على' نهاية مرنة '، مما يؤدي إلى محاذاة الجانب الأيمن من الحاوية.
بعد تنفيذ التعليمات البرمجية أعلاه ، تبدو صفحة الويب كما يلي:
يوضح الإخراج أن div محاذاة بشكل صحيح باستخدام التخطيط المرن.
الطريقة الرابعة: استخدام تخطيط الشبكة
يمكن أيضًا استخدام تخطيط الشبكة لمحاذاة عنصر div. تظل بنية كود HTML كما هي:
.align-to-right {عرض: شبكة ؛
أعمدة شبكة القوالب: كرر ( 2 ، 1 فرنك ) ؛
}
. بمحاذاة اليمين {
عمود الشبكة- يبدأ : 2 ؛
الحشو: 10 بكسل ؛
خلفية- لون : بط نهري صغير؛
}
وصف الكود موضح أدناه:
- أولاً ، حدد فئة div الأصلية ' .align-to-right 'وتعيين' عرض 'الخاصية إلى' شبكة '.
- بعد ذلك ، أنشئ عمودين بحجم متساوٍ باستخدام ' شبكة-قالب-أعمدة ' ضبط ل ' كرر (2 ، 1fr) '.
- في النهاية ، حدد فئة div الفرعية ' . بمحاذاة اليمين 'وضبط' بداية عمود الشبكة 'إلى 2. تبدأ هذه الخاصية العنصر من العمود الثاني ، أي من الجانب الأيمن.
بعد تنفيذ الكود أعلاه ، تبدو صفحة الويب كما يلي:
يوضح الناتج أن div تمت محاذاته الآن إلى اليمين باستخدام ' شبكة 'خصائص التخطيط.
خاتمة
لمحاذاة div في الاتجاه الصحيح ، استخدم ' يطفو '،' يمين '،' تخطيط مرن '، و ' تخطيط الشبكة ' ملكيات. ال ' يطفو 'تعيين الخاصية إلى اليمين من خلال تعيين القيمة' 0 بكسل '. عن ' ثني '، اضبط العرض على الانثناء واستخدم' محاذاة الذات 'الخاصية إلى' نهاية مرنة '. باستخدام خاصية الشبكة ، قم بإنشاء عمودين متساويين الحجم واجعل div الفرعي يبدأ من العمود الثاني.