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

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

1. إنشاء ملف CSS. إذا كان لديك بالفعل ملف CSS لصفحة الويب الخاصة بك ، فقم بتحرير ملف CSS الخاص بك وإضافة الكود التالي.

2. أضف الكود التالي إلى ملف CSS.

 .floatRight {تعويم: الحق؛ هامش اليسار: 20px} 

نصيحة: إضافة تعويم: يسار يجعل الصورة تطفو على الجانب الأيسر من النص.

إذا كنت تريد أن يكون هناك أكثر من صورة تطفو على اليمين ، أضف السطر التالي أيضًا إلى ملف CSS.

 .floatRightClear {تعويم: الصحيح، واضحة: الحق؛ هامش اليسار: 20px} 

3. بعد إنشاء الرمز أعلاه ، احفظ ملف CSS واتصل به من كل صفحة HTML باستخدام رمز مشابه للمثال أدناه. في مثالنا ، قمنا بتسمية style.css لملف CSS.

4. أخيرًا ، أضف إلى أي صورة تريد أن تطفو على الجانب الأيمن من الحاوية.