במאמר זה נדון בכל אחת מהגישות המוזכרות אחת לאחת ונספק דוגמה מתאימה לכל שיטה.
אז בואו נתחיל!
שיטה 1: הצב שני Divs זה לצד זה ב-CSS באמצעות רשת
ה-CSS ' רֶשֶׁת פריסת ' מאפשרת למשתמש להציב שניים או יותר שני divs זה לצד זה. בעיקרון, הרשת היא ערך של מאפיין התצוגה המשמש ליצירת פריסה המורכבת משורות ועמודות.
תחביר
תחביר של מאפיין התצוגה עם פריסת הרשת ניתן להלן:
תצוגה: רשת
כעת, בואו נבדוק דוגמה הקשורה להצבת שני divs זה לצד זה ב-CSS באמצעות פריסת הרשת.
דוגמא
כאן, ניצור שני divs ילדים בתוך div האב, עם שמות הכיתה בתור ' הוֹרֶה ', ' יֶלֶד ' ו' יֶלֶד ”:
< div מעמד = 'הוֹרֶה' >< div מעמד = 'יֶלֶד' >< / div >
< div מעמד = 'יֶלֶד' >< / div >
< / div >
בשלב הבא בקטע CSS, השתמש ב' .הוֹרֶה ' כדי לגשת ל-div האב ולהגדיר את הערך של מאפיין התצוגה כ' רֶשֶׁת '. לאחר מכן, הגדר את השבר באמצעות ' עמודות-תבנית-רשת ' מאפיין ליצירת מקום לעמודים. במקרה שלנו, נגדיר שברים כ' 1fr ' ו' 1fr ', כלומר שני ה-divs רכשו מקום שווה. יתר על כן, נגדיר את הפער בין שתי עמודות באמצעות המאפיין column-gap ונקבע את הערך שלו כ' 25 פיקסלים '.
CSS:
.הוֹרֶה {לְהַצִיג : רֶשֶׁת ;
עמודות-תבנית-רשת : 1 פר 1 פר ;
פער-עמודים : 25 פיקסלים ;
}
בשלב הבא, אנו משתמשים ב' .יֶלֶד ' כדי לגשת לשני ה-DVD הקטנים ולהגדיר את גובה ה-DVD כ' 250 פיקסלים ' והגדר את צבע הרקע כ' rgb(253, 5, 109) ”:
.יֶלֶד {גוֹבַה : 250 פיקסלים ;
רקע כללי : rgb ( 253 , 5 , 109 ) ;
}
זה יראה את התוצאה הבאה:
בואו נעבור לשיטה אחרת למקם div זה לצד זה
שיטה 2: הצב שני Divs זה לצד זה ב-CSS באמצעות flex
ה ' לְהַגמִישׁ ” הוא הערך של מאפיין התצוגה המאפשר הצבת שני divs זה לצד זה. מאפיין זה משמש להגדרת אורך גמיש עבור הפריט הגמיש. הוא מכווץ או מגדל את הפריט הגמיש כך שיתאים למיכל שלו.
תחביר
התחביר של מאפיין התצוגה עם flex ניתן להלן:
תצוגה: flex;בואו נעבור לדוגמא כדי להבין את המושג המוצהר.
דוגמא
נשקול את אותו קובץ HTML ונחיל את ' לְהַגמִישׁ ' למיכל האב. כאן, נגדיר את הערך של מאפיין התצוגה כ-flex ונקבע את הפער בין ה-Child divs כ' 10 פיקסלים ”:
.הוֹרֶה {לְהַצִיג : לְהַגמִישׁ ;
פער : 10 פיקסלים ;
}
לאחר מכן, הגדר את הרוחב, הגובה וצבע הרקע של ה-div כ' 650 פיקסלים ', ' 200 פיקסלים ', ו 'rgb(0, 255, 42) ', בהתאמה:
.יֶלֶד {רוֹחַב : 650 פיקסלים ;
גוֹבַה : 200 פיקסלים ;
רקע כללי : rgb ( 0 , 255 , 42 ) ;
}
התוצאה של הקוד הנתון ניתנת להלן:
שיטה 3: הצב שני Divs זה לצד זה ב-CSS באמצעות float
מאפיין ה-CSS float מציין את הכיוון הצף של אלמנט. ליתר דיוק, ניתן להשתמש במאפיין זה להצבת שני divs זה לצד זה ב-CSS.
תחביר
התחביר של המאפיין הצף הוא:
לצוף: אין|שמאל|ימיןלהלן התיאור של הערכים המפורטים לעיל:
- אף אחד: הוא משמש להגבלת הציפה.
- שמאלה: הוא משמש לצוף אלמנטים בצד שמאל.
- ימין: הוא משמש לצוף אלמנטים בצד ימין.
נעבור לדוגמה של הצבת div זה לצד זה.
דוגמא
כעת, ניצור שני divs בתוך התג
ונקצה את שם המחלקה בתור ' div1 ' ו' div2 ”: < גוּף >< div מעמד = 'div1' >< / div >
< div מעמד = 'div2' >< / div >
< / גוּף >
לאחר מכן, השתמש ב' .div1 ' ו' .div2 ' כדי לגשת למכולות שנוספו בקטע HTML. נשתמש בשני ה-divs באותה מחלקה מכיוון שהמאפיינים והערכים שאנו הולכים להקצות לשניהם זהים.
לאחר מכן, אנו מקצים את הערך של המאפיין הצף כ' שמאלה ' והגדר את הרוחב והגובה של ה-div כ' חמישים% ' ו' 40% '. אנו משתמשים גם במאפיין גודל התיבה ומגדירים את הערך שלו כ' תיבת גבול '. יתר על כן, הגדר את צבע הרקע של ה-div כ' rgb(7, 255, 222) ' והגדר את הערכים של מאפיין הגבול כ' 3 פיקסלים ', ' מוצק ', ו' rgb(255, 0, 255) ”:
.div1 , .div2 {לָצוּף : שמאלה ;
רוֹחַב : חמישים% ;
גוֹבַה : 40% ;
גודל קופסא : תיבת גבול ;
רקע כללי : rgb ( 7 , 255 , 222 ) ;
גבול : 3 פיקסלים מוצק rgb ( 255 , 0 , 255 ) ;
}
הערה: אתה יכול למקם שני divs זה לצד זה מבלי להשתמש במאפיין גודל תיבה ובמאפיין גבול על ידי הגדרת צבעי הרקע השונים של divs.
ברגע שאתה מיישם את הקוד לעיל, מבצע את קובץ ה-HTML ותראה את התוצאה:
הערה: כדי ליצור פער בין שני divs, תחילה צור div נוסף ולאחר מכן הגדר את השוליים של div בהתאם.
סיכום
ניתן למקם דיבונים זה לצד זה באמצעות שלוש שיטות שונות של CSS, שהן ' לְהַגמִישׁ ' ו' רֶשֶׁת ' ערכי מאפיין התצוגה וה' לָצוּף ' תכונה. כל אחת מהשיטות פועלת ביעילות; עם זאת, אתה יכול להשתמש בכל אחד מהם בהתאם לדרישות שלנו. במדריך זה, דנו בשלוש שיטות להצבת div זה לצד זה באמצעות CSS וסיפקנו דוגמאות קשורות.