תוֹכֶן
זה חצות, וזה div באתר שלך עדיין נראה כמו חזה צעצוע של ילד. כל האלמנטים הם בלגן מעורבב, ובכל פעם שאתה משחק עם CSS לְהַצִיג רכוש, הם מסדרים את עצמם לכדי שטות אחרת לגמרי.
אם אתה כמוני, כנראה שתפתור את זה על ידי מלמול תחת נשימה ולהיות תוקפני יותר באופן עקבי עם המקלדת שלך. ולמרות שהאסטרטגיה הזו עבדה אצלי בעבר, לאחרונה התחלתי למצוא דרך טובה יותר להבין את לְהַצִיג תכונה.
מתברר היסודות של לְהַצִיג הם הרבה יותר פשוטים ממה שחשבתי במקור. למעשה, הם משתמשים באותם עקרונות כמו לארוז מזוודה. אני הולך לכסות בלוק תצוגה, בלוק מוטבע ו בשורה. אם סידרתם מזוודה בצורה מסודרת בעבר, תראו את ההקבלה. אם אתה מסוג האנשים שמנהלים את כל הבגדים שלך בצורה אקראית - ובכן, אני יכול לעשות כל כך הרבה בשבילך.
המזוודה שלנו תכיל שלושה סוגים של בגדים:
- עדינים, כמו חולצת צווארון
- חולצות שאפשר לרדד
- גרביים או תחתונים שניתן למלא ברווחים
לעיון, אם דגמנו את המזוודה ב- HTML, היא תיראה כך:
div class = 'מזוודה'> div class = 'עדין'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'חולצה'> / div> div class = 'גרביים'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'חולצת טי'> / div> / div>
הפריטים העדינים מעל
בלוק תצוגה הוא ברירת המחדל עבור רוב רכיבי ה- HTML. כלומר האלמנט תופס את כל החלל האופקי בתוך המכולה שלו div. אם הוא נמצא ליד רכיבי אח אחרים, הוא יתחיל שורה חדשה ולא יאפשר אלמנטים אחרים בקו שלו. זה דומה לפריטים העדינים ששמת בחלק העליון של המזוודה שלך. מדובר במאמרים עדינים או חכמים כמו חולצות צווארון. אתה לא רוצה שהם יתקמטו, אז תוודא שהם לא נדחקים כלפי בגדי בגדים אחרים.
זה מעלה את אחד החלקים הקשים ביותר של בלוק תצוגה. שימו לב איך חולצת הצווארון לא תופסת את כל רוחב המזוודה? זה לא אומר שפריטים אחרים יקפצו לגובהם. בוא נגיד שהחולצה הזו היא 60 אחוז מרוחב המזוודה; זה עדיין ימנע מלהצטרף לאלמנטים אחרים ברמה העליונה.
לכן יש בתמונה גבול כתום. א בלוק תצוגה אלמנט יוסיף שוליים אוטומטית סביבו אם הוא לא תופס את כל המרחב האופקי.
חולצות טריקו ארוזות בצורה מסודרת
רוב המזוודה שלך כנראה מלאה בשאר בגדיך לטיול שלך. למען הפשטות, אנו הולכים לחתוך זאת לחולצות טריקו בלבד. יש ויכוח גדול באינטרנט האם קיפול או גלגול יעיל יותר. אני סוג של אדם מתקפל.
בכל מקרה, כדי להתאים לרוב הפריטים, אתה מסדר את חולצות הטריקו זו לצד זו. זה בדיוק מה תצוגה: בלוק מוטבע מיועד ל. אלמנטים אלה יכולים לשבת אחד ליד השני באותו קו, וגם ליד תצוגה: מוטבע אלמנטים.
בניגוד תצוגה: מוטבע אלמנטים, an בלוק מוטבע אלמנט יעבור לשורה הבאה אם הוא לא מתאים להכיל אותו div לצד השני בלוק מוטבע אלמנטים. כדי להישפך חולצת טריקו לשורה הבאה, יהיה עליך לחתוך אותה לשניים ולהשתמש במחצית הנותרת כדי להתחיל שורה חדשה. בלוק מוטבע אלמנטים אינם מורשים להתפצל לשניים אם הם אינם מתאימים לקו.
הגרביים שממלאות את החסר
חזור אל ה- HTML המקורי ותשים לב שיש גרביים אחת div> בין שמונת החולצות. אבל התבונן במבט האופקי של המזוודה מימין. אם יש גרביים div>, איך זה יכול לסיים את השורה האמצעית ולהתחיל את השורה התחתונה? זו המטרה של תצוגה: מוטבע!
An בשורה אלמנט ישפך לשורה הבאה אם הוא חורג מרוחב div (באופן זה הוא שונה מ בלוק מוטבע אוֹ לַחסוֹם). מאז הגרביים שלנו div מלא בגרביים הממולאות באקראי לרווחים, זה יכול בקלות להתחיל למלא את החסר בצד ימין של השורה האמצעית ולשפוך על מנת להתחיל את השורה התחתונה.
אין צורך לחתוך גרביים לשניים כדי שזה יקרה. זו הסיבה שהם יכולים להפוך בשורהואילו חולצות טריקו יכולות להיות רק בלוק מוטבע. אם החולצות בשורה האמצעית תפסו רק 60 אחוז מהרוחב, הגרביים div> יעלה למעלה כדי למלא את כל החלל בשאר השורה.
נסיעה נעימה
זהו ה- CSS הסופי עבור המזוודה שלנו:
.delicate {display: block; רוחב: 60%; }. חולצה {תצוגה: בלוק מוטבע; רוחב: 20%; }. גרביים {display: inline; }
להלן מספר תרחישים חלופיים להמחשת השימושים השונים בתצוגה. אם המעדנים מעל היו תצוגה: בלוק מוטבע, הם ישתלבו ממש לצד החולצות. חלק מחולצות הטריקו היו עולות לשורה העליונה, והשאר יסתגלו בהתאם. לא יהיה שום חיץ נוח משמאל וימין לחולצת הצווארון.
אם לכל חולצה הייתה בלוק תצוגה, תהיה לך ערימה ענקית של חולצות טריקו זו על גבי זו, אחת לשורה. אם היו הגרביים תצוגה: בלוק מוטבע, כולם היו יושבים בשורה התחתונה ולא זורמים בין שתי השורות. כמה חולצות טריקו היו נדחקות לשורה אחרת ויוצרות קו רביעי. יהיה פער בצד ימין של השורה האמצעית של חולצות הטריקו.
בשיטה שתיארתי כאן, בסופו של דבר אנו עם מזוודה ארוזה למשעי המנצלת בצורה הטובה ביותר את השטח הזמין.
מאמר זה במקור הופיע ב מגזין נטו גיליון 289; קנה את זה כאן!
