خاصية CSS هي خاصية مهمة جدًا للتخطيط. يسمح لك بوضع تصميمات صفحات الويب الخاصة بك تمامًا كما تريد عرضها - ولكن لكي تتمكن من استخدامها عليك فهم كيفية عملها.
في ورقة أنماط ، تبدو الخاصية Float CSS كما يلي:
.the {float: right؛ }
هذا يخبر المتصفح أن كل شيء مع فئة "اليمين" يجب أن يُطفو إلى اليمين.
ستقوم بتعيينه كما يلي:
class = "right" />
ما الذي يمكنك تعويمه مع خاصية CSS float؟
لا يمكنك تحريك كل عنصر في صفحة الويب. يمكنك فقط تعويم عناصر مستوى الكتلة. هذه هي العناصر التي تأخذ كتلة من المساحة على الصفحة ، مثل الصور () ، الفقرات () ، الأقسام () ، والقوائم ().
تُسمى العناصر الأخرى التي تؤثر في النص ، ولكن لا تنشئ مربعًا في الصفحة ، العناصر المضمّنة ولا يمكن تعويمها. هذه هي عناصر مثل span () ، فواصل الأسطر () ، التركيز القوي () ، أو المائل ().
أين تطفو؟
يمكنك تعويم العناصر إلى اليمين أو اليسار. أي عنصر يتبع العنصر floated سوف يتدفق حول العنصر floated على الجانب الآخر.
على سبيل المثال ، إذا قمت بتعويم صورة إلى اليسار ، فإن أي نص أو عناصر أخرى تتبعها ستتدفق حوله إلى اليمين. وإذا قمت بتعويم صورة إلى اليمين ، فإن أي نص أو عناصر أخرى تتبعها ستتدفق حوله إلى اليسار. سيتم عرض الصورة التي يتم وضعها في كتلة نص بدون أي نمط عائم مطبق عليها ، إلا أنه يتم ضبط المتصفح على عرض الصور. عادة ما يكون هذا مع السطر الأول من النص التالي المعروض في أسفل الصورة.
إلى أي مدى سوف تطفو؟
سينقل العنصر الذي تم تحريكه إلى أقصى يسار أو يمين عنصر الحاوية قدر الإمكان. ينتج عن هذا العديد من المواقف المختلفة بناءً على كيفية كتابة الكود. لهذه الأمثلة ، سوف أقوم بتعويم صغير DIV عنصر إلى اليسار:
- إذا لم يكن للعنصر المتحرك عرض محدد مسبقًا ، فسيحتاج إلى مساحة أفقية بقدر ما هو مطلوب ومتوفر ، بغض النظر عن العوامة. ملاحظة: تحاول بعض المتصفحات وضع عناصر بجانب العناصر التي تم تعويمها عند عدم تحديد العرض ، وعادة ما يعطي العنصر غير المعامل مقدارًا صغيرًا من المساحة فقط. لذلك يجب عليك دائما تحديد العرض على العناصر الطافية.
- إذا كان عنصر الحاوية هو عنصر HTML ، فسيتم تعويم العنصر
DIVسيجلس على الهامش الأيسر من الصفحة. - إذا كان عنصر الحاوية موجودًا في حد ذاته بشيء آخر ، فيتم تعويمه
DIVسيجلس على الهامش الأيسر للحاوية. - يمكنك تعشيق العناصر العائمة ، والتي يمكن أن تؤدي إلى انتهاء الطفو في مكان مثير للدهشة. على سبيل المثال ، يتم تعويم هذا اليسار
DIVداخل اليمين طرحتDIV. - سوف تجلس العناصر المغلفة بجانب بعضها البعض إذا كان هناك مكان في الحاوية. على سبيل المثال ، تحتوي هذه الحاوية على ثلاثة أمتار بعرض 100 بكسل
DIVعناصر طفت في حاوية واسعة 400px.
يمكنك حتى استخدام الطوافات لإنشاء تخطيط معرض صور. يمكنك وضع كل صورة مصغّرة (تعمل بشكل أفضل عندما تكون كلها بنفس الحجم) في 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 للتخطيط
بمجرد أن تفهم كيف تطفو الخاصية ، يمكنك البدء في استخدامه لتخطيط صفحات الويب الخاصة بك. هذه هي الخطوات التي أتخذها لإنشاء صفحة ويب عائمة:
- قم بتصميم التصميم (على الورق أو في أداة الرسومات أو في رأسي).
- تحديد مكان أقسام الصفحة ستكون.
- تحديد عرض الحاويات المختلفة والعناصر الموجودة بها.
- تعويم كل شيء. حتى يتم نقل العنصر حاوية في أقصى اليمين إلى اليسار حتى أعلم أين سيكون فيما يتعلق بمنفذ عرض المتصفح.
طالما أنك تعرف أن العرض (النسب المئوية جيدة) لأقسام التخطيط الخاصة بك ، يمكنك استخدام تطفو خاصية لوضعها حيث ينتمون على الصفحة. والشيء الجميل هو ، لا داعي للقلق بشأن نموذج الصندوق المختلف عن Internet Explorer أو Firefox.
