استخدم CSS Align Left لتحريك صورة موقع ويب إلى يسار النص

عناصر الكتلة في صفحة الويب بالترتيب التسلسلي. لتحسين مظهر الصفحة أو فائدتها ، يمكنك تعديل هذا الترتيب عن طريق التفاف الكتل ، بما في ذلك الصور ، بحيث يتدفق النص حول الصور.

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

ابدأ بـ HTML

يضيف هذا المثال صورة في بداية الفقرة (قبل النص ، ولكن بعد الافتتاح

بطاقة شعار). إليك ترميز HTML الأولي:

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

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

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

لاحظ أن هذا الفصل لا يفعل شيئًا بمفرده. CSS سيحقق النمط المطلوب.

مضيفا أنماط CSS

أضف هذه القاعدة إلى الموقع ورقة الأنماط:

.غادر {
تعويم: اليسار؛
الحشو: 0 20 بكسل 20 بكسل 0 ؛
}

هذا النمط يطفو على أي شيء مع الفصل غادر على يسار الصفحة ويضيف القليل حشوة على يمين الصورة وأسفلها حتى لا يتطابق النص مع الصورة.

في المستعرض ، ستتم محاذاة الصورة الآن إلى اليسار ؛ سيظهر النص إلى يمينه مع وجود مسافة بين الاثنين.

طرق أخرى لتحقيق هذه الأنماط

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

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

لتصميم هذه الصورة ، اكتب CSS هذا:

.main-content img { 
تعويم: اليسار؛ 
الحشو: 0 20 بكسل 20 بكسل 0 ؛
}

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

تجنب الأنماط المضمنة

أخيرًا ، يمكنك استخدام الأنماط المضمنة:

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

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