هل تريد رمز التفاف النص حول صورة ما؟ عادةً عندما تقوم بإنشاء صفحة 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. إذا كنت تريد إجراء التفاف النص على الجانب الأيمن من الصورة ، يجب عليك محاذاة الصورة إلى اليسار:
3إذا كنت تريد أن يظهر النص على اليسار وأن تظهر الصورة في أقصى اليمين ، ما عليك سوى تغيير معلمة المحاذاة إلى "اليمين".
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 nell pellentesque nunc in lorem egestas non imperdiet enim congue.
<img itemprop="image" data-original="IMAGE URL" align="right" /><p>Your text goes here.</p>
هذا كل شيء! من السهل جدا أليس كذلك؟ المرة الوحيدة التي تريد فيها استخدام CSS هي إذا كنت تريد إضافة هوامش إلى الصور ، بحيث يكون هناك مسافة بين النص والصورة.
يمكنك إضافة هوامش إلى صورة باستخدام بعد رمز تصميم CSS:
<img itemprop="image" data-original=”IMAGE URL” align=”left” style=”margin: 0px 10px 0px 0px;” /><p>Your text goes here.</p>
تستخدم الشفرة المذكورة أعلاه عنصر MARGIN CSS لإضافة 10 بكسل من المسافات البيضاء على الجانب الأيمن من الصورة. نظرًا لأننا قمنا بمحاذاة الصورة إلى اليسار ، نريد إضافة المساحة البيضاء إلى اليمين.
بشكل أساسي ، تمثل الأرقام الأربعة TOP LIGHT BOTTOM LEFT. إذا كنت ترغب في إضافة المساحة البيضاء إلى صورة محاذاة إلى اليمين ، فيمكنك القيام بذلك:
<img itemprop="image" data-original=”IMAGE URL” align=”right” style=”margin: 0px 0px 0px 10px;” /><p>Your text goes here.</p>
لذلك فمن السهل استخدام HTML لتنفيذ هذه المهمة ، ولكن مرة أخرى ، قد لا تعمل بشكل جيد للمواقع المتجاوبة.
التفاف النص حول الصورة باستخدام CSS
أفضل طريقة لالتفاف النص حول صورة هي استخدام CSS. فهو يمنحك تحكمًا أكثر دقة في الحبوب لتحديد موضع العناصر ويعمل بشكل أفضل مع معايير التشفير الحديثة.
<img itemprop="image" data-original="IMAGE URL" alt="A photo" class="lazy left" />
على الرغم من أنني قمت بتضمين CSS مباشرةً في علامة الصورة في مثال HTML ، لا يجب عليك فعل ذلك أبداً بدلاً من ذلك ، يجب أن يكون لديك ملف منفصل يسمى ورقة أنماط تحتوي على كل شفرة CSS.
في علامة IMG ، يمكنك ببساطة تعيين فئة للعلامة ومنحها اسماً. في المثال الخاص بي ، قمت بتسمية الفئة اليسار. في ورقة الأنماط ، كل ما علي فعله هو إضافة الشفرة التالية:
.left {
float: left;
padding: 0 10px 0 0;}
كما ترى ، أضفت 10px من الحشو إلى الجانب الأيمن من الصورة المحاذاة إلى اليسار . كما أنني استخدمت الخاصية float لنقل الصورة خارج التدفق العادي للمستند ووضعها على الجانب الأيسر للحاوية الرئيسية.
كما ترى ، فإنه أكثر نظافة من إضافة كل هذا الرمز إلى علامة IMG نفسها. كما أنه أسهل في الإدارة ويمكنك استخدام الكثير من خصائص CSS لتخصيص المظهر على صفحة الويب الخاصة بك. إذا كان لديك أي أسئلة ، فلا تتردد في التعليق. استمتع!