כיצד לצוף תמונה משמאל טקסט בדף אינטרנט

שימוש ב- CSS כדי ליישר תמונה לצד שמאל של דף אינטרנט פריסה

תסתכל כמעט בכל דף אינטרנט היום ואתה תראה שילוב של טקסט ותמונות מה שהופך את רוב הדפים האלה. קל מאוד להוסיף טקסט ותמונות לדף . הטקסט מקודד באמצעות תגי HTML סטנדרטיים כמו פסקאות, רשימות ורשימות, בעוד שהתמונות כלולות באמצעות אלמנט .

היכולת להפוך את הטקסט ואת התמונות האלה לעבוד טוב ביחד הוא מה שמגדיר נהדר מעצבי אתרים בנפרד! אתה לא רוצה שהטקסט והתמונות שלך יופיעו בזה אחר זה, וכך יתבצעו פריסת אלמנטים ברמת החסימה כברירת מחדל. לא, אתה רוצה קצת שליטה על איך טקסט ותמונות לזרום ביחד במה יהיה בסופו של דבר העיצוב החזותי של האתר שלך.

לאחר תמונה כי הוא מיושר בצד שמאל של הדף בזמן הטקסט של הדף זורם סביב זה הוא טיפול עיצוב משותף עבור עיצוב מודפס וגם עבור דפי אינטרנט. במונחים של אינטרנט, אפקט זה ידוע בשם צף את התמונה . סגנון זה מושגת עם המאפיין CSS עבור "לצוף". מאפיין זה מאפשר לטקסט לזרום סביב התמונה המיושרת שמאלה לצד ימין. (או סביב התמונה מיושר ימינה בצד שמאל שלה.) בואו נסתכל איך להשיג את האפקט החזותי הזה.

התחל ב- HTML

הדבר הראשון שאתה צריך לעשות הוא קצת HTML לעבוד איתו. עבור הדוגמה שלנו, אנו נכתוב פסקה של טקסט ולהוסיף תמונה בתחילת הפסקה (לפני הטקסט, אבל אחרי תג הפתיחה

). הנה איך זה סימון HTML נראה:

הטקסט של הפסקה הולך כאן. בדוגמה זו, יש לנו תמונה של תמונה headhot, אז הטקסט הזה יהיה כנראה על האדם מי headhothot עבור.

כברירת מחדל, דף האינטרנט שלנו יוצג עם התמונה שמעל לטקסט. הסיבה לכך היא שהתמונות הן אלמנטים ברמת בלוק ב- HTML. משמעות הדבר היא שהדפדפן מציג מעברי שורה לפני ואחרי אלמנט התמונה כברירת מחדל. אנו נשנה את מראה ברירת המחדל על-ידי פנייה ל- CSS. קודם כל, עם זאת, נוסיף ערך בכיתה אלמנט התמונה שלנו . זה בכיתה יפעל כמו "וו" כי נשתמש ב- CSS שלנו מאוחר יותר.

הטקסט של הפסקה מופיע כאן. בדוגמה זו, יש לנו תמונה של תמונה headhot, אז הטקסט הזה יהיה כנראה על האדם מי headhothot עבור.

שים לב כי זה סוג של "שמאל" עושה שום דבר בפני עצמו! כדי שנוכל להשיג את הסגנון הרצוי שלנו, אנחנו צריכים להשתמש הבא CSS .

סגנונות CSS

עם HTML שלנו במקום, כולל המאפיין בכיתה שלנו של "שמאל", עכשיו אנחנו יכולים לפנות CSS. היינו מוסיפים כלל לגיליון הסגנונות שלנו שצופה את התמונה וגם מוסיפים מעט ריפוד לידו, כך שהטקסט שיסתיים בסופו של דבר סביב התמונה לא יתייצב מולו יותר מדי. הנה CSS שאתה יכול לכתוב:

.lft {float: משמאל; ריפוד: 0 20px 20px 0; }

סגנון זה מרחף את התמונה שמאלה ומוסיף מעט ריפוד (באמצעות כמה קיצור קצר) לימין ולתחתית התמונה.

אם בדקת את הדף שמכיל את ה- HTML בדפדפן, התמונה תהיה כעת מיושרת לשמאל והטקסט של הפסקה יופיע לימין עם כמות מתאימה של ריווח בין השניים. הערה הערך בכיתה של "שמאל" כי השתמשנו הוא שרירותי. יכולנו לקרוא לזה כל דבר, כי המונח "שמאל" אינו עושה דבר בפני עצמו. זה צריך להיות תכונה בכיתה ב- HTML שעובד עם סגנון CSS בפועל המכתיב את השינויים החזותיים שאתה מחפש לעשות.

דרכים חלופיות כדי להשיג סגנונות אלה

גישה זו של מתן אלמנט התמונה תכונה בכיתה ולאחר מכן באמצעות סגנון CSS כללי שצף אלמנט הוא רק דרך אחת אתה יכול להשיג את התמונה "שמאל מיושר" מבט. אתה יכול גם לקחת את הערך בכיתה של התמונה ואת הסגנון אותו עם CSS על ידי כתיבת בורר ספציפי יותר. לדוגמה, נסתכל על דוגמה שבה התמונה נמצאת בתוך חלוקה עם ערך מחלקה של "תוכן ראשי".