كود HTML إلى التفاف النص حول الصورة

2019

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

قد ترغب أحيانًا في تضمين نص بجوار صورة بدلاً من أسفلها. وهذا ما يسمى التفاف النص حول الصورة. في الواقع ، من السهل جدًا التفاف النص باستخدام HTML. لاحظ أنه لا يلزم استخدام CSS من أجل التفاف النص.

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

التفاف النص حول الصورة باستخدام HTML

Lorem ipsum dolor sit amet، consectetur adipiscing elit. Fusce dictum gravida enim، quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus et magnis dis parturient montes، nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc in lorem egestas non imperdiet enim congue.

لكي يتم التفاف النص على الجانب الأيمن من الصورة ، يجب عليك محاذاة الصورة إلى اليسار:

نصك يذهب هنا.

إذا كنت تريد أن يظهر النص على اليسار وأن تظهر الصورة في أقصى اليمين ، ما عليك سوى تغيير معلمة المحاذاة إلى "اليمين".

نصك يذهب هنا.

هذا هو! من السهل جدا أليس كذلك؟ المرة الوحيدة التي تريد فيها استخدام CSS هي إذا كنت تريد إضافة هوامش إلى الصور ، بحيث يكون هناك مسافة بين النص والصورة.

يمكنك إضافة هوامش إلى صورة باستخدام شفرة تصميم CSS التالية:

نصك يذهب هنا.

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

في الأساس ، تمثل الأرقام الأربعة TOP RIGHT BOTTOM LEFT. لذا إذا كنت تريد إضافة المساحة البيضاء إلى صورة محاذاة إلى اليمين ، فيمكنك القيام بذلك:

نصك يذهب هنا.

لذلك من السهل استخدام HTML لتنفيذ هذه المهمة ، ولكن قد لا تعمل هذه الميزة بشكل جيد مع المواقع سريعة الاستجابة.

التفاف النص حول الصورة باستخدام المغلق

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

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

في علامة IMG ، يمكنك ببساطة تعيين فئة للعلامة ومنحها اسماً. في المثال الخاص بي ، قمت بتسمية الفئة المتبقية . في ورقة الأنماط ، كل ما علي فعله هو إضافة الشفرة التالية:

 .lft {float: left؛ الحشو: 0 10px 0 0؛}

كما ترون ، أضفت 10px من الحشو إلى الجانب الأيمن من الصورة المحاذاة إلى اليسار. استخدمت أيضًا الخاصية float لنقل الصورة خارج التدفق العادي للمستند ووضعها على الجانب الأيسر للحاوية الرئيسية.

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