استخدام خاصية Float CSS لتصميم تخطيطات صفحة الويب
خاصية CSS هي خاصية مهمة جدًا للتخطيط. يسمح لك بوضع تصميمات صفحات الويب الخاصة بك تمامًا كما تريد عرضها - ولكن لكي تتمكن من استخدامها عليك فهم كيفية عملها.
في ورقة أنماط ، تبدو الخاصية Float CSS كما يلي:
.the {float: right؛ }
هذا يخبر المتصفح أن كل شيء مع فئة "اليمين" يجب أن يُطفو إلى اليمين.
ستقوم بتعيينه كما يلي:
class = "right" />
ما الذي يمكنك تعويمه مع خاصية CSS float؟
لا يمكنك طفو كل عنصر على صفحة الويب. يمكنك فقط تعويم عناصر مستوى الكتلة . هذه هي العناصر التي تأخذ كتلة من المساحة على الصفحة ، مثل الصور () ، الفقرات () ، الأقسام () ، والقوائم ().
العناصر الأخرى التي تؤثر على النص ، ولكن لا تنشئ مربعًا في الصفحة تسمى عناصر مضمنة ولا يمكن تعويمها. هذه هي عناصر مثل span () ، فواصل الأسطر () ، التركيز القوي () ، أو المائل ().
أين تطفو؟
يمكنك تعويم العناصر إلى اليمين أو اليسار. أي عنصر يتبع العنصر floated سوف يتدفق حول العنصر floated على الجانب الآخر.
على سبيل المثال ، إذا قمت بتعويم صورة إلى اليسار ، فإن أي نص أو عناصر أخرى تتبعها ستتدفق حوله إلى اليمين. وإذا قمت بتعويم صورة إلى اليمين ، فإن أي نص أو عناصر أخرى تتبعها ستتدفق حوله إلى اليسار. سيتم عرض الصورة التي يتم وضعها في كتلة نص بدون أي نمط عائم مطبق عليها ، إلا أنه يتم ضبط المتصفح على عرض الصور.
عادة ما يكون هذا مع السطر الأول من النص التالي المعروض في أسفل الصورة.
إلى أي مدى سوف تطفو؟
سينقل العنصر الذي تم تحريكه إلى أقصى يسار أو يمين عنصر الحاوية قدر الإمكان. ينتج عن هذا العديد من المواقف المختلفة بناءً على كيفية كتابة الكود.
في هذه الأمثلة ، سأقوم بتعويم عنصر DIV صغير إلى اليسار:
- إذا لم يكن للعنصر المتحرك عرض محدد مسبقًا ، فسيحتاج إلى مساحة أفقية بقدر ما هو مطلوب ومتوفر ، بغض النظر عن العوامة. ملاحظة: تحاول بعض المتصفحات وضع عناصر بجانب العناصر التي تم تعويمها عند عدم تحديد العرض - وعادة ما يعطي العنصر غير المعامل مقدارًا صغيرًا من المساحة. لذلك يجب عليك دائمًا تحديد عرض على العناصر الطافية.
- إذا كان عنصر الحاوية هو عنصر HTML ، فسوف يجلس DIV العائم على الهامش الأيسر للصفحة.
- إذا كان عنصر الحاوية موجودًا في حد ذاته بشيء آخر ، فإن DIV العائم سيجلس على الهامش الأيسر للحاوية.
- يمكنك تعشيق العناصر العائمة ، والتي يمكن أن تؤدي إلى انتهاء الطفو في مكان مثير للدهشة. على سبيل المثال ، هذا الطفو هو اليسار DIV العائم داخل DIV الصحيح عائم.
- سوف تجلس العناصر المغلفة بجانب بعضها البعض إذا كان هناك مكان في الحاوية. على سبيل المثال ، تحتوي هذه الحاوية على ثلاثة عناصر بعرض DIV بعرض 100 بكسل ويتم عرضها في حاوية بعرض 400 بكسل.
يمكنك حتى استخدام الطوافات لإنشاء تخطيط معرض صور. يمكنك وضع كل صورة مصغّرة (تعمل بشكل أفضل عندما تكون كلها بنفس الحجم) في DIV مع التسمية التوضيحية وتعويم عناصر DIV في الحاوية.
بغض النظر عن مدى اتساع نافذة المتصفح ، ستصطف الصور المصغرة بشكل منتظم.
إيقاف الطوفان
بمجرد معرفة كيفية الحصول على عنصر للتعويم ، من المهم معرفة كيفية إيقاف تشغيل الطفو. يمكنك إيقاف تعويم مع الخاصية مسح CSS. يمكنك مسح العواميد اليسرى أو العوامات اليمنى أو كليهما:
واضح: اليسار ؛
واضح: صحيح
واضحة على حد سواء؛
سيظهر أي عنصر تقوم بتعيين الخاصية clear له تحت عنصر تم تعويم هذا الاتجاه. على سبيل المثال ، في هذا المثال ، لا يتم مسح فقرتي النص الأولتين ، ولكن الثالثة هي.
العب باستخدام القيمة الواضحة للعناصر المختلفة في مستنداتك للحصول على تأثيرات تخطيط مختلفة.
أحد أكثر التنسيقات العائمة إثارة للاهتمام هو سلسلة من الصور أسفل العمود الأيمن أو الأيسر بجوار فقرات النص. حتى إذا لم يكن النص طويلاً بما يكفي للتمرير فوق الصورة ، فيمكنك استخدام المسح الضوئي على كافة الصور للتأكد من أنها تظهر في العمود بدلاً من الصورة السابقة.
HTML (تكرار هذه الفقرة):
Duis aute irure dolor sed do eiusmod tempor incididunt in reprehenderit in voluptate. Cupidatat non proident، ut labore et dolore magna aliqua.
CSS (لتطفو الصور إلى اليسار):
img.flloat {float: left؛
واضحة: اليسار.
هامش: 5px؛
}
وإلى اليمين:
img.flloat {float: right؛
واضحة: الحق؛
هامش: 5px؛
}
باستخدام Floats للتخطيط
بمجرد أن تفهم كيفية عمل الخاصية العائمة ، يمكنك البدء في استخدامها لتخطيط صفحات الويب الخاصة بك. هذه هي الخطوات التي أتخذها لإنشاء صفحة ويب عائمة:
- قم بتصميم التصميم (على الورق أو في أداة الرسومات أو في رأسي).
- تحديد مكان أقسام الصفحة ستكون.
- تحديد عرض الحاويات المختلفة والعناصر الموجودة بها.
- تعويم كل شيء. حتى يتم نقل العنصر حاوية في أقصى اليمين إلى اليسار حتى أعلم أين سيكون فيما يتعلق بمنفذ عرض المتصفح.
طالما أنك تعرف أن العرض (النسب المئوية جيدة) لأقسام التخطيط الخاصة بك ، يمكنك استخدام الخاصية العائمة لوضعها في المكان الذي تنتمي إليه في الصفحة. والشيء الجميل هو ، ليس لديك ما يدعو للقلق بقدر ما يتعلق نموذج صندوق مختلف لإنترنت إكسبلورر أو فايرفوكس.