أفضل طريقة لتنفيذ موقع ويب مكون من 3 أعمدة باستخدام علامات <DIV>؟[مغلق]

StackOverflow https://stackoverflow.com/questions/83279

  •  01-07-2019
  •  | 
  •  

سؤال

أقوم بتطوير موقع ويب مكون من 3 أعمدة باستخدام تخطيط مثل هذا:

    <div id='left'   style='left:      0; width: 150px; '> ... </div>
    <div id='middle' style='left:  150px; right: 200px'  > ... </div>
    <div id='right'  style='right:     0; width: 200px; '> ... </div>

ولكن، مع الأخذ في الاعتبار خاصية "الموضع" الافتراضية لـ CSS <DIV>'s هو "ثابت"، بلدي <DIV>'s تم عرضهما تحت الآخر، كما هو متوقع.

لذلك قمت بتعيين "الموضع" لخاصية CSS على "نسبي"، وقمت بتغيير الخاصية "العلوية" في "الوسط" و"الأيمن" <DIV>'s إلى -(ناقص) ارتفاع السابق <DIV>.لقد نجح الأمر بشكل جيد، لكن هذا الأسلوب جلب لي مشكلتين:

1) على الرغم من أن Internet Explorer 7 يعرض ثلاثة أعمدة بشكل صحيح، إلا أنه لا يزال يحتفظ بشريط التمرير العمودي كما لو كان <DIV>'s تم وضعها واحدة أسفل الأخرى، وهناك مساحة بيضاء كبيرة بعد انتهاء المحتوى.أود أن أحصل على ذلك.

2) ارتفاع هذه العناصر متغير، لذلك لا أعرف حقًا القيمة التي يجب تحديدها لكل منها <DIV>الخاصية 'العلوية'؛وأنا لا أرغب في ترميزها.

لذا سؤالي هو، ما هي أفضل طريقة (بسيطة + أنيقة) لتنفيذ هذا التصميم؟أرغب في تجنب تحديد المواقع بشكل مطلق، كما أود أن أبقي تصميمي بلا جدول.

هل كانت مفيدة؟

المحلول

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

هذا المقال على وجه الخصوص ينبغي أن تساعدك.

نصائح أخرى

يعطي مخطط CSS محاولة.من السهل حقًا البدء به، ولكنه قوي بما يكفي لمعظم التطبيقات.

من السهل أن نفهم الدروس والأمثلة.يحتوي على مكتبة طباعة تنتج نتائج جيدة فور إخراجها من الصندوق.

إلى حد بعيد الطريقة الأسهل التي وجدتها للقيام بثلاثة أعمدة (أو أي عدد آخر من الأعمدة مقسمة على المساحة المتاحة بطرق غريبة) هي شبكات يوي.هناك YUI منشئ الشبكات لتعطيك التخطيط الأساسي.سيعطيك ما يلي تخطيطًا أساسيًا مكونًا من 3 أعمدة بعرض 750 بكسل (مقسم إلى 1/3 1/3 1/3) مع شريط جانبي أيسر بحجم 160 بكسل.يعد تغييره إلى عروض أخرى وتكوينات الشريط الجانبي وتقسيمات الأعمدة أمرًا سهلاً حقًا.

1    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
2    "http://www.w3.org/TR/html4/strict.dtd"> 
3   <html> 
4   <head> 
5      <title>YUI Base Page</title> 
6      <link rel="stylesheet" href="http://yui.yahooapis.com/2.5.1/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css"> 
7   </head> 
8   <body> 
9   <div id="doc" class="yui-t1"> 
10     <div id="hd"><h1>YUI: CSS Grid Builder</h1></div> 
11     <div id="bd"> 
12      <div id="yui-main"> 
13      <div class="yui-b">    <div class="yui-gb"> 
14          <div class="yui-u first"> 
15      <!-- YOUR DATA GOES HERE --> 
16              </div> 
17          <div class="yui-u"> 
18      <!-- YOUR DATA GOES HERE --> 
19              </div> 
20          <div class="yui-u"> 
21      <!-- YOUR DATA GOES HERE --> 
22              </div> 
23      </div> 
24  </div> 
25      </div> 
26      <div class="yui-b"><!-- YOUR NAVIGATION GOES HERE --></div> 
27       
28      </div> 
29     <div id="ft">Footer is here.</div> 
30  </div> 
31  </body> 
32  </html>

هناك عدد من الأمثلة والمكتبات التي يمكنك البحث عنها - تم إدراج زوجين بالفعل (يجب قراءة قائمة منفصلة).

لقد استخدمت مكتبة واجهة مستخدم Yahoo (YUI) في موقعي الأخيرين وأعجبني حقًا.تدعمها Yahoo تمامًا كما أنها سريعة الفهم والاستخدام.هنا هناك CSS للشبكات, ، والذي يسمح لك بتنسيق صفحتك إلى أي عدد تريده من الأعمدة والأقسام.

YUI رائع لأنك لا تحتاج إلى إعادة اختراع العجلة لأساس موقعك، وهم يقومون بكل العمل للتأكد من أن أسسهم تعمل عبر جميع المتصفحات.وأفضل للجميع، مجانا.

انا يعجبني 960 نظام الشبكة.إنه ملف CSS خفيف الوزن وسهل الاستخدام ويقسم الشاشة إلى 12 (أو 16) عمودًا.يمكنك استخدامه لتصميم مكون من 3 أعمدة ومحاذاة بقية المحتوى الخاص بك وفقًا لذلك.

حاول تعويم عناصر div إلى اليسار، مما سيبقيها جميعًا على نفس الخط - بافتراض وجود مسافات كافية.

بالنسبة للعمود الثابت، فقط قم بتعيين الارتفاع: xxxpx سيجعلهما متساويين.

استخدم هذا 3 مولد تخطيط العمود لكي يحاول.

يعمل هذا الرمز على جهاز الكمبيوتر الخاص بي مع IE 8 وChrome وFirefox. 

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <title> Test </title>
    </head>
    <body>
        <div id="grad2" style="width:15%; height:100%; position:fixed; top:0px; left:0px; background-color:rgb(147,81,73);">
        <a href="http://abv.bg"> Column1 </a> </div>
        <div id="grad4" style="width:70%; height:100%; position:fixed; top:0px; left:15%; background-color:rgb(0,0,0);">
        <font color="#FFFFFF">Column 2 </font> </div>
        <div id="grad3" style="width:100%; height:100%; position:fixed; top:0px; left:85%; background-color:rgb(60,255,4);">
        <a href="http://abv.bg"> Column 3 </a> </div>
    </body>
</html>

أولاً، يؤدي تحديد الموضع النسبي إلى ما وصفته:فهو يحجز مساحة في الموقع الأصلي ولكنه يعرض إزاحة DIV بمقدار معين.

إذا قمت بتعويم عناصر DIV، فسوف تتكدس من اليسار إلى اليمين، ولكن هذا قد يسبب مشاكل.

يعد التخطيط المكون من ثلاثة أعمدة باستخدام CSS أمرًا صعبًا للغاية.القي نظرة على [http://www.glish.com/css/7.asp]

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top