إذا كنت مهتمًا بتعلم كيفية تعويم صورة على يمين النص ، فهذه مهمة بسيطة إلى حد ما. هناك العديد من المواقف التي يرغب فيها المبرمجون في ظهور صورة على صفحة ويب داخل النص مع تدفق النص أو التفافه حوله. التلاعب بالصور يشبه التلاعب بالنص ، لذا إذا كانت لديك خبرة في هذا الأخير ، فلن تكون هذه العملية صعبة على الإطلاق.
في الواقع ، باستخدام خاصية CSS float ، من السهل تحريك صورتك إلى يمين النص وجعل النص يتدفق حولها على الجهه اليسرى. استخدم هذا البرنامج التعليمي الذي مدته خمس دقائق لتتعلم كيف.
إعداد تخطيط مع تعويم
سيخلق هذا التصميم الأساسي مساحة للنص ويعوم صورة على يمين ذلك النص. بالتأكيد ، يمكن أن تصبح هذه التخطيطات أكثر تعقيدًا ، لكن هذا المثال سيوضح لك المبدأ الأساسي وراء العمل مع عائم ونص.
بافتراض أن لديك بالفعل مستند HTML تستخدمه وورقة أنماط CSS منفصلة ، فابدأ بإنشاء div جديد ليكون بمثابة الصف الذي يحتوي على العنصر العائم.
امنح هذا div الجديد فئتين ، الحاوية و clearfix. هناك العديد من الطرق للتعامل مع هذا الأمر ، والأسماء هي من اختيارك تمامًا ، ولكنها ستساعدك على البقاء منظمًا وإنشاء التخطيط الخاص بك.
-
في CSS الخاص بك ، حدد كيف تريد أن تتلاءم الحاوية مع تخطيطك العام. هذا المثال سوف يجعله صفًا كامل العرض.
.وعاء {
العرض: 100٪؛
الارتفاع: 25 ريم ؛
} -
بعد ذلك ، اعتني بفئة clearfix. يعد clearfix ضروريًا لأن float يمكن أن يخلق بعض مواطن الخلل الفردية في التخطيط الخاص بك. يؤدي تحديد خاصية "overflow" في clearfix إلى منع العناصر العائمة من النزف خارج مساحتها المخصصة.
.clearfix {
تجاوز: تلقائي ؛
} -
الآن ، يمكنك إنشاء عنصر داخل div الحاوية الخاصة بك وتحريكه إلى اليمين. إذا كنت تقوم بلف نص حول صورة ، فستكون هذه هي صورتك. قم بإنشاء العنصر ومنحه فئة لخاصية الطفو.
-
قم بإنشاء فئة لطفلك. ربما سترغب في إضافة بعض التصميم هناك أيضًا ، إذا كنت ستصنع المزيد من العناصر المتطابقة. خلاف ذلك ، يمكنك تطبيق فئة منفصلة لتصميمك.
.float-right {
تعويم: صحيح ؛
العرض: 300 بكسل ؛
الارتفاع: 200 بكسل ؛
لون الخلفية: أحمر ؛
الهامش: 0 0 0.5rem 0.5rem
} -
إذا كنت تبحث عن التفاف النص حول هذا العنصر العائم ، فقم بإدراج النص الآن. ضعها في أي مكان في الحاوية ، إما قبل العنصر العائم أو بعده.
بعض النصوص
المزيد من النص
...وما إلى ذلك وهلم جرا.
-
قم بتحديث صفحتك وتحقق من النتيجة.
تغليف
وهذا ما يفعله. الآن ترى أن تحريك الصورة إلى اليمين ليس بالأمر الصعب على الإطلاق. قد تكون مهتمًا أيضًا بتحريك صورة إلى اليسار وتحريكها إلى المنتصف. في حين أن الخطوة الأولى ممكنة ، لسوء الحظ ، لا يمكنك تعويم الصورة إلى المركز ، لأن ذلك يتطلب عادةً تخطيطًا من عمودين.