كيف تطفو صورة إلى يسار النص على صفحة ويب

استخدام CSS لمحاذاة صورة إلى الجانب الأيسر من صفحة الويب Layout

انظر إلى أي صفحة ويب تقريبًا اليوم وسوف ترى مزيجًا من النصوص والصور التي تشكل الجزء الأكبر من هذه الصفحات. من السهل جدًا إضافة نص وصور إلى صفحة . يتم ترميز النص باستخدام علامات HTML القياسية مثل الفقرات والقوائم والعناوين ، بينما يتم تضمين الصور باستخدام عنصر .

القدرة على جعل هذا النص وهذه الصور تعمل بشكل جيد هو ما يميز مصممي الويب العظماء! أنت لا تريد فقط أن يظهر النص والصور الخاصة بك واحدا تلو الآخر ، وهو كيف سيتم تخطيط هذه العناصر على مستوى الكتلة بشكل افتراضي. لا ، فأنت تريد بعض التحكم في كيفية تدفق النص والصور معًا في ما سيكون التصميم المرئي لموقعك على الويب.

إن وجود صورة تتم محاذاتها للجانب الأيسر من الصفحة أثناء تدفق نص هذه الصفحة حولها هو علاج تصميم مشترك للتصميم المطبوع وكذلك لصفحات الويب. في مصطلحات الويب ، يُعرف هذا التأثير باسم تعويم الصورة . يتم تحقيق هذا النمط مع خاصية CSS لـ "float". تتيح هذه الخاصية تدفق النص حول الصورة المحاذية لليسار إلى جانبها الأيمن. (أو حول صورة محاذة لليمين إلى جانبها الأيسر). دعونا نلقي نظرة على كيفية تحقيق هذا التأثير المرئي.

ابدأ بـ HTML

أول شيء ستحتاج إلى القيام به هو أن يكون لديك بعض HTML للعمل به. على سبيل المثال ، سنكتب فقرة من النص وإضافة صورة في بداية الفقرة (قبل النص ، ولكن بعد علامة

الافتتاحية). إليك ما تبدو عليه علامات HTML:

نص الفقرة يذهب هنا. في هذا المثال ، لدينا صورة لصورة الرؤوس ، لذا من المحتمل أن يكون هذا النص حول الشخص الذي يمثل وجهه.

بشكل افتراضي ، سيتم عرض صفحة الويب الخاصة بنا مع الصورة أعلى النص. هذا لأن الصور عبارة عن عناصر مستوى الكتلة في HTML. هذا يعني أن المتصفح يعرض فواصل الأسطر قبل وبعد عنصر الصورة بشكل افتراضي. سنغير هذه النظرة الافتراضية عن طريق التحويل إلى CSS. أولاً ، سنضيف قيمة صنف إلى عنصر الصورة . سيعمل هذا الفصل بمثابة "خطاف" سنستخدمها في CSS فيما بعد.

هنا ينتقل نص الفقرة. في هذا المثال ، لدينا صورة لصورة الرؤوس ، لذا من المحتمل أن يكون هذا النص حول الشخص الذي يمثل وجهه.

لاحظ أن هذه الفئة من "اليسار" لا تفعل شيئًا على الإطلاق! بالنسبة لنا لتحقيق أسلوبنا المطلوب ، نحتاج إلى استخدام CSS بعد ذلك.

أنماط CSS

باستخدام HTML في مكانه ، بما في ذلك الصف الخاص بنا من "اليسار" ، يمكننا الآن الانتقال إلى CSS. سنضيف قاعدة إلى ورقة الأنماط التي من شأنها أن تطفو هذه الصورة ، وإضافة القليل من الحشو المجاور لها بحيث لا يلتف حولها النص الذي يلتف حول الصورة في النهاية. هذا هو CSS الذي قد تكتبه:

.lft {float: left؛ المساحة المتروكة: 0 20 بكسل 20 بكسل × 0 ؛ }

هذا النمط يطفو تلك الصورة إلى اليسار ويضيف حشوة صغيرة (باستخدام بعض اختزال CSS) إلى يمين وأسفل الصورة.

إذا قمت بمراجعة الصفحة التي تحتوي على HTML هذا في مستعرض ، فستتم الآن محاذاته الصورة إلى اليسار وسيظهر نص الفقرة إلى اليمين مع وجود مقدار مناسب من التباعد بين الاثنين. لاحظ أن قيمة "اليسار" التي استخدمناها هي تعسفية. يمكن أن نطلق عليه أي شيء لأن مصطلح "اليسار" لا يفعل شيئًا من تلقاء نفسه. يجب أن يحتوي هذا على سمة صنف في HTML تعمل مع نمط CSS الفعلي الذي يحدد التغييرات المرئية التي تريدها.

طرق بديلة لتحقيق هذه الأنماط

هذا الأسلوب في إعطاء عنصر الصورة لسمة class ثم استخدام نمط CSS عام يطفو على العنصر هو طريقة واحدة فقط يمكنك من خلالها إضفاء مظهر "الصورة المحاذاة إلى اليسار". يمكنك أيضًا إزالة قيمة الصف من الصورة ووضع نمط لها باستخدام CSS عن طريق كتابة محدد أكثر تحديدًا. على سبيل المثال ، دعنا نلقي نظرة على مثال حيث تكون هذه الصورة داخل قسم ذي قيمة فئة "المحتوى الرئيسي".