كيف تطفو صورة على يمين النص

يوضح هذا البرنامج التعليمي الذي يستغرق خمس دقائق كيف

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

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

ابدء

للبدء ، اكتب فقرة من النص وأضف صورة في بداية الفقرة. يجب أن يتم ذلك قبل النص ولكن بعد علامة

:

Duis aute irure dolor sed do eiusmod tempor incididunt in reprehenderit in voluptate. Cupidatat non proident، ut labore et dolore magna aliqua. الشخير في القولق كوة النوسترود ممارسة استثنائية sint occaecat. Mollit anim id est laborum.

بعد ذلك ، أضف سمة نمط إلى الصورة وقم بتطبيق الخاصية float:

style = "float: right؛" />

سيتم تحطيم النص الخاص بك في مقابل الصورة ، لذا أضف بعض الهوامش إلى الصورة لتسهيل قراءتها:

margin: 0 5px 0 0؛ " />

تطبق خاصية الاختزال الهامشي هوامش في الترتيب الأعلى ، اليمين ، الأسفل واليمين ( TRBL ).

تغليف

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