إذا أردنا إضافة سطر تذييل في نهاية التخطيط المكون من 3 أعمدة لوضع معلومات مثل حقوق النشر. لقد واجهت مشكلة الاضطرار إلى محاذاة الجزء السفلي من 3 أعمدة. في تخطيط الجدول، نستخدم طريقة تداخل الجداول الكبيرة في جداول صغيرة، والتي يمكن بسهولة محاذاة الأعمدة الثلاثة مع تخطيط div، وتنتشر الأعمدة الثلاثة بشكل مستقل والمحتوى بارتفاعات مختلفة، مما يجعل من الصعب المحاذاة. في الواقع، يمكننا دمج divs بالكامل ووضع ثلاثة أعمدة في DIV واحد لتحقيق المحاذاة السفلية. فيما يلي مثال للتنفيذ (مربع خلفية بيضاء يحاكي الصفحة):
جسم
الكود الرئيسي لصفحة المثال هذه هو كما يلي:
<div id="header"></div>
<div معرف = "الصندوق الرئيسي">
<div id="menu"></div>
<div id="sidebar"></div>
<div id="content"></div>
</div>
<div id="footer"></div>
تتم كتابة أوراق الأنماط المحددة في الأقسام المقابلة. النقطة الأساسية هي أن طبقة الصندوق الرئيسي متداخلة في ثلاث طبقات: القائمة والشريط الجانبي والمحتوى. عندما يزيد محتوى #المحتوى، سيزيد ارتفاع #المحتوى، وسيتوسع أيضًا ارتفاع #الصندوق الرئيسي، وستتحرك طبقة #التذييل تلقائيًا إلى الأسفل. وهذا يحقق درجة عالية من القدرة على التكيف.
ومن الجدير بالذكر أيضًا أن #menu و#content يطفوان على الجانب الأيمن من الصفحة "FLOAT: right;"، #sidebar يطفو على الجانب الأيسر من طبقة #menu "FLOAT: left;"، وهذا هو يتم استخدام تحديد المواقع بطريقة عائمة، ويمكنك أيضًا استخدام تحديد المواقع المطلق لتحقيق هذا التأثير.
مشكلة أخرى في هذه الطريقة هي أن خلفية الشريط الجانبي لا يمكن أن تكون 100%. الحل العام هو ملئه بلون خلفية الجسم. (لا يمكن استخدام لون خلفية #mainbox لأن لون خلفية #mainbox غير صالح في المتصفحات مثل Mozilla.)
حسنًا، لقد تم بناء الإطار الرئيسي، أما العمل المتبقي فهو مجرد إضافة الطوب والبلاط إليه. إذا كنت ترغب في تجربة تخطيطات أخرى، أوصي بقراءة المقالات التالية:
16 أمثلة لتخطيط CSS
onestab: عرض توضيحي للتخطيط المركب المكون من ثلاثة أعمدة
onestab: تخطيط ثلاثي الأعمدة قابل للتمدد بحرية
