كيفية عرض المربعات جنبًا إلى جنب بتنسيق HTML

في الماضي ، استخدمت العديد من مواقع الويب جداول HTML لتخطيط الصفحات لأن هذه الطريقة أنتجت نتائج موثوقة باستمرار في متصفحات الويب القديمة. لم يكن هذا حلاً مثاليًا ، حيث تهدف الجداول حقًا إلى عرض البيانات المجدولة بدلاً من تخطيط الصفحات. يعني استخدام الجداول أيضًا أن التخطيط تم ترميزه بشكل ثابت في الصفحة ، مما يجعل مهمة تحديث الموقع تستغرق وقتًا أطول. قدمت Cascading Style Sheets خاصية "float" ، مما يسمح للمصممين بتعويم العناصر إلى اليسار أو اليمين. يتيح ذلك مزيدًا من التحكم في الصفحة وله ميزة إضافية تتمثل في إبقاء تخطيط الموقع منفصلاً عن المحتوى.

1

افتح محرر نص أو محرر HTML وأنشئ مستند HTML جديد.

2

أضف التعليمات البرمجية التالية إلى نص الصفحة:

هذا نص في div الأول هذا نص في div الثاني

احفظ الصفحة وافتحها في متصفح الويب الخاص بك. ستلاحظ أن المحتوى الموجود في div الثاني معروض أسفل المحتوى في أول div.

3

أدخل كود CSS التالي في قسم مستند HTML الخاص بك:

احفظ الصفحة وقم بالتحديث في المستعرض الخاص بك لعرض التغييرات. تستهدف قاعدة CSS كلا من divs المتداخلين في div “myContainer”. تخبر الخاصية "float" المتصفح أن يقوم بتعويم divs إلى اليسار - يمكنك تغيير قيمة float إلى "right" لتعويم divs على الحافة اليمنى من div المحتوي. يتم تعيين divs على عرض ثابت يبلغ 300 بكسل ولها حد أسود بحجم 1 بكسل لتسهيل رؤية التخطيط. في متصفحك ، سترى أن المربعات تُعرض الآن جنبًا إلى جنب.

4

أضف عنصر div ثالثًا إلى نص الصفحة ، خارج عنصر div "myContainer" كما هو موضح أدناه:

هذا نص في div الأول هذا نص في div الثاني هذا نص في div الثالث

احفظ الصفحة وأعد تحميلها في متصفحك. ستلاحظ أن عنصر div الثالث يظهر بجوار قسمي div الأول والثاني ، على الرغم من أنه لم يتم تعويمهما. يحدث هذا بسبب تدفق عناصر HTML المتبقية حول العناصر العائمة. قد يكون هذا سلوكًا مرغوبًا في بعض الحالات ، ولكن في هذا المثال ، نريد عرض عنصر div الثالث أسفل عناصر div العائمة لإنشاء تذييل.

5

أدخل القاعدة التالية في قسم النمط في رأس الصفحة:

clear: both; 

}

يستهدف هذا العنصر div “myFooter” الثالث ويخبر المتصفح بإيقاف العائمة وعرض عناصر HTML التالية أسفل عنصر “myContainer” div. احفظ وقم بتحديث الصفحة. ستلاحظ أن التذييل الذي تم تكوينه بواسطة div الثالث معروض الآن أسفل عناصر div العائمة.