אם אתה מעוניין ללמוד כיצד לרחף תמונה מימין לטקסט, זו משימה די פשוטה. ישנם מצבים רבים בהם מתכנתים מעוניינים שתמונה בעמוד אינטרנט תופיע בתוך הטקסט כשהטקסט זורם או עטוף סביבו. מניפולציה של תמונות דומה לתמרון טקסט, כך שאם יש לך ניסיון עם האחרון, תהליך זה לא אמור להיות קשה בכלל.
למעשה, עם מאפיין ה- CSS לצוף, קל לצוף את התמונה שלך מימין לטקסט ולזרום את הטקסט סביב צד שמאל. השתמש במדריך זה בן חמש דקות כדי ללמוד כיצד.
הגדרת פריסה עם Float
פריסה בסיסית זו תיצור מקום לטקסט שלך ותצוף תמונה מימין לטקסט זה. בהחלט, פריסות אלה יכולות להסתבך יותר, אך דוגמה זו תראה לכם את העיקרון הבסיסי שעומד מאחורי עבודה עם צף וטקסט.
בהנחה שכבר יש לך מסמך HTML שאתה עובד איתו וגיליון סגנונות נפרד של CSS, התחל ביצירת div חדש שישמש כשורה המכילה את האלמנט הצף שלך.
תן למחלקה החדשה שתי מחלקות, מיכל ותיקון ברור. יש הרבה דרכים להתמודד עם זה, והשמות הם לגמרי הבחירה שלך, אבל אלה יעזרו לך להישאר מסודרים ולקבוע את הפריסה שלך.
-
ב- CSS שלך, הגדר כיצד ברצונך שהמכולה שלך ישתלב בפריסה הכוללת שלך. דוגמה זו רק הולכת להפוך אותה לשורה ברוחב מלא.
.container {
רוחב: 100%;
גובה: 25rem;
} -
לאחר מכן, דאג לשיעור ה- clearfix. ה- clearfix נחוץ מכיוון ש- float יכול ליצור כמה תקלות מוזרות בפריסה שלך. הגדרת המאפיין "הצפה" בתיקון הקליר מונעת את היציאה של האלמנטים הצפים מהמרחב המיועד להם.
.clearfix {
הצפה: אוטומטי;
} -
כעת, באפשרותך ליצור אלמנט בתוך מחלקת המכולות שלך ולהציף אותו ימינה. אם אתה עוטף טקסט סביב תמונה, זו תהיה התמונה שלך. צור את האלמנט ותן לו מחלקה עבור המאפיין float.
-
צור את הכיתה לצוף שלך. סביר להניח שתרצה לזרוק שם גם קצת סטיילינג, אם תכין אלמנטים זהים יותר. אחרת, תוכל להחיל שיעור נפרד על העיצוב שלך.
.צוף ימני {
לצוף: מימין;
רוחב: 300 פיקסלים;
גובה: 200 פיקסלים;
צבע-רקע: אדום;
שוליים: 0 0 0.5rem 0.5rem
} -
אם אתה רוצה לעטוף טקסט סביב האלמנט הצף הזה, הכנס את הטקסט שלך עכשיו. שים אותו בכל מקום במיכל, לפני האלמנט הצף או אחריו.
קצת טקסט
טקסט נוסף
...וכולי.
-
רענן את הדף שלך ובדוק את התוצאה.
מסיימים
וזה עושה את זה. עכשיו אתה רואה שצף תמונה ימינה לא קשה בכלל. יתכן שגם אתה מעוניין לרחף תמונה שמאלה ולהרחיק אותה למרכז. בעוד שהמהלך הראשון אפשרי, למרבה הצער, אינך יכול לרחף תמונה למרכז, מכיוון שבדרך כלל נדרש פריסה של שתי עמודות.