מאמר זה מדגים את היישור הנכון של div עם דוגמאות מעשיות באמצעות CSS.
- כיצד ליישר Div באמצעות CSS?
- שימוש בנכס 'צף'.
- שימוש בנכס 'הנכון'.
- שימוש ב- Flex Layout
- שימוש בפריסת רשת
כיצד ליישר Div באמצעות CSS?
המפתח יכול ליישר ימינה כל רכיב div או תמונה בצורה שתהפוך את האתר לאטרקטיבי יותר. בשל הגמישות הגבוהה שלהם, ניתן להשתמש ברכיבי div בכמה דרכים בדף האינטרנט כגון הגדרת קטעי עמודים, יצירת עמודות וגלישת קבוצות של תוכן קשור.
בצע את השיטות הבאות כדי ליישר ימינה את ה-div:
שיטה 1: שימוש במאפיין 'צף'.
בקובץ HTML, צור div והקצה לו מחלקה של ' יישור לימין '. מחלקה ו-div זה משמשים לאורך מאמר זה.
< div מעמד = 'יישור לימין' >
< ע > זה קצת תוכן. < / ע >
< / div >
כעת, בחר במחלקת ה-div ' יישור לימין ' ולהקצות את מאפייני ה-CSS. מאפיינים אלה מנוצלים להדמיה טובה יותר:
.align-to-right {
לצוף: ימינה;
ריפוד: 10px;
רקע כללי- צֶבַע : ורוד עז;
}
בקוד לעיל, ' לָצוּף הנכס מוגדר מימין. הוא צף או מזיז את ה-div בכיוון הנכון בדף האינטרנט. מאפייני הריפוד וצבע הרקע מוגדרים ל' 10 פיקסלים ' ו' ורוד עז ' בהתאמה.
לאחר הידור של קטע הקוד לעיל, דף האינטרנט נראה כך:
הפלט לעיל מאשר שה-div נע בכיוון הנכון.
שיטה 2: שימוש בנכס 'הנכון'.
ב-CSS, בחר את המחלקה div והגדר את ' ימין ” מאפיין ל-0. זה מבטיח שהמרחק של ה-div שנבחר מהצד הימני שווה לאפס. לאחר מכן, הגדר את ' עמדה 'נכס ל' מוּחלָט 'כדי להפוך את מיקום ה-div לקבוע. בסופו של דבר, החל כמה מאפייני סטיילינג להדמיה טובה יותר:
.align-to-right{
ימין: 0 ;
מיקום: מוחלט;
ריפוד: 10px;
רקע כללי- צֶבַע : סגול בינוני;
}
לאחר ביצוע דף האינטרנט של הקוד נראה כך:
הפלט מראה שה-div עכשיו מיושר ימינה.
שיטה 3: שימוש ב- Flex Layout
Flex היא השיטה היעילה ביותר, והיא שומרת על הפריסה במהלך שינוי גודל החלון. ניתן ליישר את ה-div ימינה באמצעות CSS ' Flex Layout ' נכסים. פריסת Flex מכילה מאפיינים רבים למטרות שונות.
בקובץ HTML יוצרים div אב ובתוכו יוצרים שני divs אחים. כמו כן, הקצה לכל div מחלקה ייחודית:
< div מעמד = 'יישור לימין' >< div מעמד = 'מיושר לשמאל' >
< ע > זה עוד קצת תוֹכֶן .< / ע >
< / div >
< div מעמד = 'מיושר לימין' >
< h1 >שלום מ-Linuxhint < / h1 >
< / div >
< / div >
עכשיו בתוך ' <סגנון> תג הוסף את מאפייני ה-CSS הבאים:
.align-to-right {תצוגה: flex;
לְהַצְדִיק- תוֹכֶן : רווח-בין;
}
מיושר לימין {
align-self: flex-end;
ריפוד: 10px;
רקע כללי- צֶבַע : סגול בינוני;
}
בקוד למעלה,
- הקצה ' לְהַגמִישׁ ' ו'רווח-בין' לערכים ' לְהַצִיג ' ו' להצדיק-תוכן ” נכסים, בהתאמה. מאפיינים אלו הופכים את ה-div לכופף ומכניסים מרווח שווה בין ה-divs הילד.
- ה ' ליישר-עצמי ' המאפיין מוגדר ל' קצה גמיש ', מה שגורם לו להתיישר לצד הימני של המיכל.
לאחר ביצוע דף האינטרנט של הקוד לעיל נראה כך:
הפלט מראה שה-div מיושר ימינה באמצעות הפריסה הגמישה.
שיטה 4: שימוש בפריסת רשת
ניתן להשתמש בפריסת הרשת גם כדי ליישר ימינה את ה-div. מבנה קוד ה-HTML נשאר זהה:
.align-to-right {תצוגה: רשת;
עמודות-תבנית-רשת: חזור ( 2 , 1 פר ) ;
}
מיושר לימין {
עמודת רשת- הַתחָלָה : 2 ;
ריפוד: 10px;
רקע כללי- צֶבַע : ירוק כחלחל;
}
תיאור הקוד ניתן להלן:
- ראשית, בחר את מחלקת האב div ' .align-to-right ' וקבע את ' לְהַצִיג 'נכס ל' רֶשֶׁת '.
- לאחר מכן, צור שתי עמודות בגודל שווה באמצעות ' עמודות-תבנית-רשת ' מכוון ל ' repeat(2, 1fr) '.
- בסופו של דבר, בחר את כיתת ילד div ' מיושר לימין ' והגדר את ' רשת-עמודה-התחלה ” מאפיין ל-2. מאפיין זה מתחיל את האלמנט מהעמודה השנייה כלומר, מהצד הימני.
לאחר ביצוע הקוד לעיל, דף האינטרנט נראה כך:
הפלט ממחיש שה-div עכשיו מיושר ימינה באמצעות ' רֶשֶׁת מאפייני פריסה.
סיכום
כדי ליישר את ה-div בכיוון הנכון, השתמש ב-' לָצוּף ', ' ימין ', ' פריסה גמישה ', ו' פריסת רשת ' נכסים. ה ' לָצוּף ' מאפיין מגדיר מימין על ידי הקצאת הערך ' 0px '. בשביל ה ' לְהַגמִישׁ ', הגדר את התצוגה להתגמש והשתמש ב-' ליישר-עצמי 'נכס ל' קצה גמיש '. בעזרת מאפיין הרשת, צור שתי עמודות שוות בגודלן וגרמי ל-div הילד להתחיל מהעמודה השנייה.