باستخدام طريقة تحديد المواقع العائمة، يمكن إكمال العرض الثابت والتكيف من عمود واحد إلى عدة أعمدة بسهولة، بما في ذلك العرض الثابت لثلاثة أعمدة. هنا لدينا مطلب جديد، على أمل أن يكون لدينا تخطيط من ثلاثة أعمدة، حيث يتطلب العمود الأيسر عرضًا ثابتًا ويتم عرضه على اليسار، ويتطلب العمود الأيمن عرضًا ثابتًا ويتم عرضه على اليمين، والعمود الأوسط يجب أن يكون العمود بين العمودين الأيمن والأيسر، حيث يتكيف منتصف العمود تلقائيًا مع التغير في التباعد بين العمودين الأيسر والأيمن.
يطرح هذا مطلبًا جديدًا للتخطيط، ولا يمكن تحقيقه ببساطة عن طريق استخدام السمات العائمة وسمات النسبة المئوية. لا يدعم CSS حاليًا حسابات النسبة المئوية الدقيقة بما يكفي لتأخذ في الاعتبار المساحة التي يشغلها العمودان الأيسر والأيمن استخدم 100% للعمود الأوسط بالنسبة للعرض، سيتم استخدام عرض نافذة المتصفح بدلاً من التباعد الأوسط بين العمود الأيسر والعمود الأيمن، لذلك نحتاج إلى إعادة التفكير في هذه المشكلة.
تحديد المواقع المطلقة
قبل البدء في مثل هذا التخطيط المكون من ثلاثة أعمدة، من الضروري فهم طريقة تحديد المواقع الجديدة - تحديد المواقع المطلقة. تسمح طريقة تحديد الموضع العائمة السابقة للمتصفح بضبط الاتجاه العائم تلقائيًا وفقًا لمحتوى الكائن، ومع ذلك، عندما لا تتمكن هذه الطريقة من تلبية متطلبات تحديد الموقع، فإن هناك حاجة إلى طريقة جديدة لتحقيق ذلك، مما يوفر طريقة أخرى إلى جانب تحديد الموضع العائم طريقة تحديد الموضع هي تحديد الموضع المطلق، ويتم تحقيقه باستخدام سمة الموضع.
يتم استخدام الموضع لتعيين طريقة تحديد موضع الكائن القيم المتاحة: ثابتة/مطلقة/نسبية
بالنسبة لكل كائن في الصفحة، تكون خاصية الموضع الافتراضي ثابتة. إذا قمت بتعيين كائن إلى الموضع: المطلق، فسوف يخرج الكائن من تدفق المستند ويتم تغيير موضعه وفقًا لموضعه في جميع أنحاء الصفحة. عند استخدام هذه السمة، يمكنك استخدام أعلى، يمين، أسفل، يسار، أي قيم المسافة في الاتجاهات الأربعة أعلى، يمين، أسفل، ويسار، لتحديد الموضع المحدد للكائن CSS:
#تخطيط {
الموقف:مطلق؛
أعلى: 20 بكسل؛
اليسار: 0 بكسل؛
}
إذا كان #layout يستخدم الموضع:absolute;، فسيصبح وضع تحديد المواقع المطلق في نفس الوقت، عند تعيين top:20px;، سيكون دائمًا على بعد 20 بكسل من أعلى نافذة المتصفح، بينما سيضمن left:0px; أنه بعيد عن الجزء العلوي من نافذة المتصفح، والهامش الأيسر للمتصفح هو 0 بكسل. .
ملاحظة: إذا تم تعيين كائن على الموضع: المطلق؛ فسيتم فصله بشكل أساسي عن الكائنات الأخرى، ولن يؤثر وضع تحديد موضعه على الكائنات الأخرى، ولن يتأثر بالموضع العائم للكائنات الأخرى، بمعنى ما، بعد استخدام المطلق لتحديد المواقع، يطفو الكائن على صفحة الويب مثل الطبقة.
بعد تحديد موضع الكائن بشكل كامل، لن يتم النظر في علاقته العائمة بالصفحة، ما عليك سوى تعيين قيم الاتجاهات العلوية واليمنى والأسفل واليسار للكائن.
في هذه الحالة، فإن استخدام الموضع المطلق يمكن أن يحل المشكلة التي أثرناها جيدًا. وبالمثل، استخدم 3 div لتكوين بنية الأعمدة الثلاثة:
#غادر {
لون الخلفية: #E8F5FE؛
الحدود: 1 بكسل صلب #A9C9E2؛
الارتفاع: 400 بكسل؛
العرض: 200 بكسل؛
الموقف: مطلق؛
أعلى: 0 بكسل؛
اليسار: 0 بكسل؛
}
#يمين {
لون الخلفية: #FFE7F4؛
الحدود: 1 بكسل صلب #F9B3D5؛
الارتفاع: 400 بكسل؛
العرض: 200 بكسل؛
الموقف: مطلق؛
أعلى: 0 بكسل؛
اليمين: 0 بكسل؛
}
بهذه الطريقة، سيتم عرض العمود الأيسر بالقرب من الحافة اليسرى من اليسار: 0px؛ بينما سيتم عرض العمود الأيمن من اليمين: 0px؛ بحيث يتم عرض العمود الأيمن من اليمين، و#center في سيستخدم الوسط أنماط CSS العادية:
#مركز {
لون الخلفية: #F2FDDB؛
الحدود: 1 بكسل صلب #A5CF3D؛
الارتفاع: 400 بكسل؛
الهامش الأيمن: 202 بكسل؛
الهامش الأيسر: 202 بكسل؛
}
بالنسبة إلى #center، لا نحتاج إلى تعيين أسلوبه العائم، نحتاج فقط إلى السماح له بهامش أيسر والحفاظ دائمًا على عرض #lef و#right، مما يحقق عرضًا متكيفًا يبلغ 202 بكسل على كلا الجانبين يبلغ عرض الجانبين الأيسر والأيمن 202 بكسل، وتسمح المسافة فقط بعرض #left و #right في هذه المساحة، وبالتالي تحقيق المتطلبات.