فكرت فجأة في هذه الطريقة عندما كنت أكتب تصميمًا من ثلاثة أعمدة في CSS لبضعة أيام. شعرت بالجنون قليلاً من هذه الفكرة. إذا كان هناك أي خطأ في ذلك ، فالرجاء إعطائي بعض النصائح.
عندما أحتاج إلى كتابة تصميم من ثلاثة أعمدة ، سأختار عمومًا استخدام طريقة تخطيط DIV التالية:
الشكل 1 DIV تخطيط
لا شك أن استخدام طرق التعشيش هذه يمكن أن يقلل بلا شك من احتمال أخطاء الكود كثيرًا ، ولكن في الوقت نفسه ، يكون هذا التصميم معقدًا بعض الشيء وهو غير مريح قليلاً للصيانة اللاحقة. عندما نقوم بتخطيط التنقل ، نستخدم غالبًا طريقة ، والتي تتمثل في استخدام قائمة 〈ul〉 للتخطيط ، ويمكن وصف التنقل على أنه تخطيط متعدد العمود. نظرًا لأن هذا هو الحال ، يمكننا أيضًا استخدام 〈ul〉 لتخطيط الصفحة متعددة الأعمدة.
الشكل 2 DIV تخطيط
هذا تخطيط ثابت للعرض ، مما يعني أن السيولة ليست قوية. لم يتم اختبار تخطيط السيولة بعد. سأحاول ذلك عندما يكون لدي وقت. ما يلي هو رمز هذا التصميم:
<! doctype html public -// w3c // dtd xhtml 1.0 transitional // en http://www.w3
<html xmlns = http: //www.w3.org/1999/xhtml>
<head>
<meta http-equiv = content-type content = text/html ؛ charset = utf-8 ″ />
<title> استخدم UL للتخطيط متعدد العمود </title>
<نوع النمط = text/css>
* {الهامش: 0 ؛ الحشو: 0 ؛}
جسم {
العرض: 100 ٪ ؛
الارتفاع: 100 ٪
الخلفية: #DDEDFB ؛
}
#MainContent {
العرض: 600 بكسل ؛
الهامش: 10px Auto ؛
}
#header ،#footer {
الخلفية:#8AC7FA ؛
الارتفاع: 80 بكسل ؛
واضح: كلاهما ؛
}
#footer {
واضح: كلاهما ؛
الحشو أعلى: 10 بكسل ؛
}
#محتوى {
الارتفاع: 300 بكسل ؛
الهامش: 10px Auto ؛
}
#ul {
على غرار القائمة: لا شيء ؛
الارتفاع: 100 ٪
}
#content ul li {
العرض: 150 بكسل ؛
الارتفاع: 100 ٪
الخلفية:#8AC7FA ؛
تعويم: اليسار.
}
#content ul li#li2 {
العرض: 280 بكسل ؛
الهامش: 0 10px ؛
}
#content ul li#li2 ul li {
العرض: 270 بكسل ؛
الارتفاع: 140 بكسل ؛
الهامش: 5px ؛
الخلفية:#0581F0 ؛
}
</style>
</head>
<body>
<div id = maincontent>
<div id = header> هذا هو الرأس </div>
<div id = content>
<ul>
<li> هذا هو اليسار </li>
<li id = li2 ″>
<ul>
<li> هذا هو الجزء العلوي من الوسط </li>
<li> هذا هو الجزء السفلي في الوسط </li>
</ul>
</li>
<li> هذا هو الحق </li>
</ul>
</div>
<div id = footer> هذا هو القاع </div>
</div>
</body>
</html>
يمكن عرض هذا الرمز بشكل طبيعي تحت IE7 و FF3. المتصفحات الأخرى لم تختبرها. إذا كان لديك طريقة أفضل ، فقد تقترحها أيضًا.