باستخدام تحديد المواقع العائمة ، يمكن إكمال العرض الثابت والقدرة على التكيف من عمود إلى أعمدة متعددة بشكل أساسي ، بما في ذلك العرض الثابت من ثلاثة أعمدة. لقد طرحنا هنا متطلبات جديدة ، على أمل الحصول على تخطيط من ثلاثة أعمدة ، حيث يتطلب العمود الأيسر عرضًا ثابتًا ويتم عرضه على اليسار ، ويتطلب العمود الأيمن عرضًا ثابتًا ويتم عرضه على اليمين ، والوسط ، والوسط. يجب أن يكون العمود في العمود الأيسر والعمود الأيمن. هذا يضع متطلبات جديدة للتخطيط ، وببساطة لا يمكن تحقيق السمة المئوية يستخدم للعمود الأوسط للعرض ، وسيستخدم عرض نافذة المتصفح ، بدلاً من التباعد الأوسط بين الأعمدة اليسرى واليمنى ، لذلك نحتاج إلى إعادة التفكير في هذه المشكلة. #تَخطِيط { إذا كان #Layout يوضح الموقّع ؛ الهامش الأيسر هو 0px. . وبهذه الطريقة ، سيتم عرض العمود الأيسر على الجانب الأيسر من الحافة اليسرى ، في حين سيتم عرض العمود الأيمن على الجانب الأيمن على اليمين: 0 بكسل ؛ من أجل #Center ، لم نعد بحاجة إلى ضبط طريقة العائمة. تتيح المسافة اليسرى واليمنى عرض #LEFT و #Right في هذا المجال ، وبالتالي تحقيق المتطلبات.
تحديد المواقع المطلقة
قبل البدء في هذا التصميم المكون من ثلاثة أعمدة ، من الضروري فهم طريقة تحديد المواقع الجديدة - تحديد المواقع المطلقة. يتم تعديل طريقة تحديد المواقع السابقة تلقائيًا بواسطة المتصفح وفقًا لمحتوى الكائن. يتم تحقيق تحديد المواقع ، وتحديد المواقع المطلقة باستخدام سمة الموضع.
الموضع المستخدم لتعيين القيم المتاحة لتحديد الكائن: ثابت/مطلق/قريب
لكل كائن في الصفحة ، خاصية الموضع الافتراضية ثابتة. إذا قمت بتعيين الكائن على الموضع: المطلق ، فسيتم فصل الكائن عن دفق المستند وإعادة وضعه وفقًا لموقع الصفحة بأكملها. عند استخدام هذه الخاصية ، يمكنك استخدام أعلى ، يمين ، أسفل ، يسار ، وهي قيمة المسافة في الاتجاهات الأربعة من الجزء العلوي واليمين واليسرى لتحديد الموضع المحدد للكائن.
الموقف: مطلق ؛
أعلى: 20 بكسل ؛
اليسار: 0px ؛
}
ملاحظة: إذا تم تعيين كائن على الموقف: سيتم فصله بشكل أساسي عن الكائنات الأخرى ، ولن يؤثر وضعه على الكائنات الأخرى ، ولن يتأثر بالموضع العائم للكائنات الأخرى. تحديد المواقع المطلقة ، يطفو الكائن على صفحة الويب مثل طبقة.
بعد تحديد المواقع تمامًا ، لن يتم النظر في الكائن مع العلاقة العائمة في الصفحة.
في هذه الحالة ، يمكن أن يؤدي استخدام تحديد المواقع المطلقة إلى حل المشكلة التي أثارناها جيدًا. وبالمثل ، نستخدم 3 divs لتشكيل هياكل الأعمدة الثلاثة لدينا:
#غادر {
خلفية اللون: #e8f5fe ؛
الحدود: 1 بكسل Solid #A9C9E2 ؛
الارتفاع: 400 بكسل ؛
العرض: 200 بكسل ؛
الموقف: مطلق ؛
أعلى: 0px ؛
اليسار: 0px ؛
}
#يمين {
لون الخلفية: #ffe7f4 ؛
الحدود: 1 بكسل Solid #F9b3d5 ؛
الارتفاع: 400 بكسل ؛
العرض: 200 بكسل ؛
الموقف: مطلق ؛
أعلى: 0px ؛
اليمين: 0px ؛
}
#مركز {
لون الخلفية: #f2fddb ؛
الحدود: 1 بكسل Solid #A5CF3D ؛
الارتفاع: 400 بكسل ؛
يمين الهامش: 202px ؛
الهامش اليساري: 202px ؛
}