في CSS، هناك طريقتان لتنفيذ تخطيط العمود. الطريقة الأولى هي استخدام الموضع المطلق (الموضع المطلق) بين خيارات تحديد الموضع الأربعة في CSS (المطلق والثابت والنسبي والثابت)، والتي يمكنها إزالة عنصر في المستند من موضعه الأصلي وإعادة وضعه في أي مكان تريده. والثاني هو استخدام مفهوم التعويم في CSS.
يمكن استخدام الموضع المطلق أو العائم لتحقيق تأثيرات العمود. يمكن استخدام الاثنين بشكل مستقل أو دمجهما معًا ليكمل كل منهما الآخر.
1. التموضع المطلق ميزة التموضع المطلق هي أنه يمكننا التحكم بدقة في موضع أي عنصر - لا يوجد أي تخمين أو حظ. نظرًا لأن العنصر الذي تم تحديد موضعه بشكل مطلق تتم إزالته بالكامل من تدفق المستند العادي دون ترك أي أثر، فلن يكون له أي تأثير على العناصر الأخرى.
لذلك دعونا نحاول كيفية تنفيذ التخطيط التالي باستخدام تحديد المواقع المطلق.
هذا تخطيط مكون من ثلاثة أعمدة ويتم توسيطه. من بينها، العمود A هو عمود المحتوى الرئيسي، والعمودان B وC عبارة عن أعمدة جانبية. بادئ ذي بدء، لا يمكننا استخدام الموضع المطلق مباشرة لوضع الأعمدة الثلاثة A وB وC في الموضع المركزي، لأن دقة شاشة كل شخص تختلف عن تأثير التمركز على الشاشة بدقة 1024X768 لا تعمل في قرارات أخرى بالتأكيد لن يتم التركيز على التأثير الذي يظهر على الشاشة عالية السرعة، فكيف يمكن حل هذه المشكلة؟
لحسن الحظ، هناك ميزة مفيدة للغاية في نموذج تحديد الموضع المطلق، وهي: إذا تم أيضًا تحديد موضع حاوية عنصر محدد موضعًا مطلقًا، فلن تعتمد القيم العليا واليسرى المحددة بواسطة العنصر على العنصر الجذر html للمستند (وهو أيضًا الزاوية اليسرى العليا من نافذة المتصفح)، ولكن سيتم حساب الإزاحة بناءً على الزاوية اليسرى العليا من الحاوية الخاصة به. بمعنى آخر، أي أن الحاوية الموضوعة ستكون بمثابة نقطة البداية لتحديد الموضع المطلق لجميع العناصر الموجودة فيها.
لذلك، باستخدام هذه الميزة، نقوم بإضافة حاوية D خارج الأعمدة A، B، و C، كما هو موضح أدناه:
بعد ذلك، نقوم بتوسيط الحاوية D ونضيف إليها سمة: الموضع: النسبي، وبهذه الطريقة، نستخدم الموضع المطلق لتحديد موضع القيم العلوية واليسرى لـ A وB وC. مواضع A وB. و C سوف يعتمد على الحاوية D. يتم حساب موضع الزاوية اليسرى العليا، بحيث يمكن تحقيق تأثير التمركز المطلوب بثلاثة أعمدة.
ومع ذلك، فإن تخطيطنا الشائع الاستخدام ليس بهذه البساطة، فبالإضافة إلى ثلاثة أعمدة، نحتاج أيضًا إلى رأس وتذييل، كما هو موضح أدناه:
في هذا الوقت، لن ينجح استخدام التخطيط ذي الموضع المطلق، لأن العنصر ذو الموضع المطلق ستتم إزالته بالكامل من تدفق المستند. في هذا الوقت، سيكون التذييل بجوار الرأس ويتم عرضه أسفل الرأس.
إذا كان يجب علينا استخدام الموضع المطلق، فيجب علينا معرفة ارتفاع كل عمود من الأعمدة الثلاثة مسبقًا، ثم وضع التذييل بناءً على أعلى عمود. إذا لم يكن من الممكن تحديد طول النص في أي عمود، فبالإضافة إلى استخدام JavaScript، يمكننا فقط التخلي عن فكرة تحديد الموضع المطلق والاستثمار بدلاً من ذلك في احتضان التخطيط العائم.
2. العائمة
الهدف الأصلي من العائمة هو تعويم الصورة المدرجة في المقالة إلى اليسار أو اليمين، بحيث يلتف النص الموجود أسفل الصورة حولها تلقائيًا، بحيث لا تكون هناك مساحة فارغة كبيرة على اليسار أو الجانب الأيمن من الصورة.
على الرغم من أن بناء جملة العائمة بسيط، إلا أنه ليس من السهل إتقانه. دعنا نعطي مثالاً على كيفية استخدام العائمة للتخطيط. وبالمثل، سنقوم بتنفيذ تخطيط من ثلاثة أعمدة مع تذييل. كما هو موضح أدناه:
كيفية استخدام تعويم لتحقيق مثل هذا التأثير؟ في الواقع، الأمر بسيط جدًا:
1. اضبط عرض E والمركز E.
2. اضبط عرض A وB وC، وطفو A وB وC إلى اليسار على التوالي
3. اضبط المسافة الواضحة ما
يجب شرحه هو أن التخطيط العائم لا يزال يتبع التدفق العادي للمستند، لذا بالمقارنة مع الموضع المطلق، فإن موضع إعلان العنصر في ملف مصدر HTML مهم بشكل خاص عند تحديد الموضع العائم. بالطبع، إن أبسط طريقة لحل هذه المشكلة هي تبادل ترتيب الإعلان للعمود الأيسر والعمود الأيمن في الملف المصدر. وهناك أيضًا طرق لتحقيق نفس التخطيط دون تبادل ترتيب الأعمدة، ولكن هذا يتطلب استخدام المقارنة طريقة غامضة لاستخدام قيم الهامش السالبة. في الظروف العادية، من المرجح أن يختار الأشخاص تبديل ترتيب الإعلانات في العمودين الأيسر والأوسط من الملف المصدر.