למד כיצד להפוך טקסט לעטוף סביב תמונה צפה עם CSS.
כדי לגרום לטקסט שלך לעטוף את התמונה מימין, בדומה לאופן שבו הוא מופיע בתמונה המציגה מאמר זה, השתמש בכלל CSS כמו זה:
כלל הציפה: שמאל גורם לתמונה לעבור לשוליים השמאליים. כלל הריפוד-ימין מונע מהטקסט להתנגש ממש בצד ימין של התמונה. אם יתווסף גבול לתמונה זו, הריפוד היה מגיע בין התמונה לגבול. ראה סעיף 2 כדי לעבוד עם תמונה עם גבול.
לאחר מכן, הוסף שוליים משמאל וימין של התמונה כדי למרכז אותה. הערך המתאים עבור השוליים השמאלי והימני למרכז כל דבר הוא אוטומטי.
כדי ליצור גבול עבה דמוי מסגרת באמצעות סגנון הגבול החריץ, ניתן להשתמש בכלל כזה:
סגנונות גבול אחרים הם מוצק, מנוקד, מקווקו, כפול, רכס, הכנסה והתחלה. רוחב יכול לבוא לידי ביטוי בפיקסלים, ems או אחוזים.
ניתן להחיל גבולות באופן סלקטיבי בחלק העליון, הימני, התחתון והשמאלי של התמונה. אתה יכול להשתמש בידע הזה כדי ליצור אפקט כמו צללית.
באמצעות גבול מוצק ב-2 גוונים של אפור רק בגבול הימני והתחתון, אתה מקבל אפקט צללית.
img { float: left; סגנון גבול-ימין: מוצק; גבול-ימני-רוחב: 8px; גבול-ימני-צבע: #CCCCCC; סגנון גבול-תחתון: מוצק; border-bottom-width: 8px; צבע גבול-תחתון: #999999; שוליים-ימין: 1em; margin-bottom: 1em; }
עֵצָה
אם יש לך תמונות ביותר מחלוקה אחת (div) של עמוד, השתמש בבוררי צאצאים כדי לסגנן אותן בנפרד. בוררים אפשריים: #content img, #sidebar img, #feature img.
