كيفية محاذاة الأقسام التابعة جنبًا إلى جنب داخل الأقسام الرئيسية غير المتداخلة

لديك قسمين جنبًا إلى جنب، كل منهما داخل شعبة الوالدين الخاصة بهم. تتكرر عناصر div الأصلية هذه عدة مرات. أنت ترغب في وضع كل زوج من Child_div_1 وchild_div_2 أفقيًا بجانب بعضهما البعض.

لتحقيق ذلك، استخدم العرض:inline-block; خاصية النمط على divs الطفل. تسمح هذه الخاصية لـ divs بالمحاذاة كعناصر مضمنة دون مقاطعة التدفق الطبيعي للمحتوى. بينما سيتم عرض divs جنبًا إلى جنب، فإنها ستحتفظ بحالتها كعناصر كتلة.

توفر هذه الطريقة طريقة أبسط لتحقيق التخطيط المطلوب مقارنة باستخدام العناصر العائمة. فيما يلي مثال على HTML وCSS المعدلين:

.child_div_1, .child_div_2 {
  display:inline-block;
}

لمزيد من الإرشادات، يمكنك الرجوع إلى البرنامج التعليمي التالي: http://learnlayout.com/inline-block.html