Բովանդակություն
- Վերեւում գտնվող նուրբ իրերը
- Կոկիկորեն փաթեթավորված շապիկներ
- Գուլպաները, որոնք լրացնում են բացերը
- Բարի ճանապարհ
Կեսգիշեր է, և այդ մեկը div ձեր կայքում դեռ նման է մանկական խաղալիքների կրծքավանդակի: Բոլոր տարրերը խառնաշփոթ խառնաշփոթ են, և ամեն անգամ, երբ խաղում ես CSS- ի հետ ցուցադրում գույքը, նրանք վերադասավորվում են բոլորովին այլ անհեթեթության:
Եթե դուք ինձ պես եք, ապա դա հավանաբար կլուծեք ձեր քթի տակ մրթմրթալով և ստեղնաշարի հետևողականորեն ավելի ագրեսիվ դառնալով: Եվ չնայած այդ ռազմավարությունն ինձ համար նախկինում աշխատել է, ես վերջերս նպատակադրվեցի գտնել ավելի լավ տարբերակ `հասկանալու այն ցուցադրում սեփականություն
Պարզվում է ցուցադրում շատ ավելի պարզ են, քան ես ի սկզբանե կարծում էի: Իրականում նրանք օգտագործում են նույն սկզբունքները, ինչ ճամպրուկը փաթեթավորելը: Ես պատրաստվում եմ լուսաբանել ցուցադրում ՝ բլոկ, inline-block և շարված, Եթե նախկինում ճամպրուկը կարգին կերպով եք դասավորել, զուգահեռը կտեսնեք: Եթե դուք այն մարդն եք, որը պատահական կերպով խոյում է ձեր բոլոր հագուստները. Դե, ես այնքան շատ բան ունեմ, որ կարող եմ անել ձեզ համար:
Մեր ճամպրուկը երեք տեսակի հագուստ է պարունակելու.
- Նրբահամ, ինչպես մանյակե վերնաշապիկը
- Շապիկներ, որոնք կարող են փաթաթվել
- Գուլպաներ կամ ներքնազգեստ, որոնք կարող են լցվել բացերի մեջ
Տեղեկանքի համար, եթե մենք ճամպրուկը մոդելավորենք HTML- ով, ապա այն կստացվի այսպես.
div class = 'ճամպրուկ'> div class = 'նուրբ'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'socks'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div դաս = 'tshirt'> / div> / div>
Վերեւում գտնվող նուրբ իրերը
Displayուցադրել `բլոկ կանխադրված է HTML տարրերի մեծ մասի համար: Դա նշանակում է, որ տարրը զբաղեցնում է իր տարայի ողջ հորիզոնական տարածքը div, Եթե այն գտնվում է եղբայրների և քույրերի այլ տարրերի կողքին, ապա այն կսկսի նոր գիծ և թույլ չի տա իր տարրին այլ տարրեր: Այն նման է նուրբ իրերին, որոնք դնում եք ճամպրուկի վերին մասում: Սրանք նուրբ կամ խելացի հոդվածներ են, ինչպիսիք են օձիքավոր վերնաշապիկները: Դուք չեք ցանկանում, որ դրանք կնճռոտվեն, այնպես որ համոզվեք, որ դրանք չեն մղվում հագուստի այլ կտորների դեմ:
Սա բերում է դրա ամենադժվար մասերից մեկի ցուցադրում ՝ բլոկ, Ուշադրություն դարձրեք, թե ինչպես է մանյակով վերնաշապիկը չի զբաղեցնում ճամպրուկի ամբողջ լայնությունը: Դա չի նշանակում, որ այլ իրեր կբարձրանան իր մակարդակին: Ասենք, որ այս վերնաշապիկը ճամպրուկի լայնության 60 տոկոսն է. այն դեռ արգելափակում է այլ տարրերին վերևի մակարդակին միանալուն:
Այդ պատճառով նկարում կա նարնջագույն եզրագիծ: Ա ցուցադրում ՝ բլոկ տարրը ավտոմատ կերպով իր շուրջ լուսանցք կավելացնի, եթե այն չի զբաղեցնում ամբողջ հորիզոնական տարածքը:
Կոկիկորեն փաթեթավորված շապիկներ
Ձեր ճամպրուկի մեծ մասը, հավանաբար, լի է ձեր հագուստի մնացած մասով `ձեր ճանապարհորդության համար: Պարզության համար մենք պատրաստվում ենք կրճատել սա միայն վերնաշապիկներով: Ինտերնետում մեծ բանավեճ կա այն մասին, թե ծալելը կամ գլորվելն ավելի արդյունավետ է: Ես ծալվող տեսակ եմ:
Համենայն դեպս, ամենաշատ իրերը տեղավորելու համար կողք կողքի շարում ես քո վերնաշապիկները: Սա հենց այն է, ինչ ցուցադրում ՝ inline-block նախատեսված է Այս տարրերը կարող են նստել միմյանց կողքին նույն գծի վրա, ինչպես նաև կողքին ցուցադրել տարրեր
Ի տարբերություն ցուցադրել տարրեր, ան inline-block տարրը կտեղափոխվի հաջորդ տող, եթե այն չի տեղավորվում դրա պարունակության մեջ div մյուսի կողքին inline-block տարրեր Հաջորդ շարքի վրա վերնաշապիկի թափվելու համար հարկավոր է այն կիսով չափ կտրել, իսկ մնացած կեսը օգտագործել նոր շարքը սկսելու համար: Inline-block տարրերը թույլ չեն տալիս կիսել կիսով չափ, եթե դրանք չեն տեղավորվում գծի վրա:
Գուլպաները, որոնք լրացնում են բացերը
Վերադարձեք նախնական HTML- ին և կիմանաք, որ կա մեկ գուլպաներ div> ութ շապիկների արանքում: Բայց նայեք աջ կողմում գտնվող ճամպրուկի հորիզոնական տեսքին: Եթե կա մեկ գուլպաներ div>, ինչպե՞ս կարող է այն ավարտել միջին շարքը և սկսել ստորին շարքը: Սա է նպատակը ցուցադրել!
Ան շարված տարրը կտարածվի հաջորդ տողի վրա, եթե այն գերազանցի լայնությունը div (այս կերպ այն տարբերվում է inline-block կամ արգելափակել) Քանի որ մեր գուլպաները div լի է գուլպաներով, որոնք պատահաբար լցված են բացերի մեջ, այն կարող է հեշտությամբ սկսել լրացնել միջին շարքի աջ կողմի բացը և թափվել `ներքևի շարքը սկսելու համար:
Որպեսզի դա տեղի ունենա, ոչ մի գուլպան պետք չէ կիսով չափ կիսել: Ահա թե ինչու նրանք կարող են դառնալ շարված, մինչդեռ շապիկները կարող են լինել միայն inline-block, Եթե միջին շարքի վերնաշապիկները զբաղեցնում էին միայն լայնության 60 տոկոսը, ապա գուլպաները div> կբարձրանային վերև ՝ շարքի մնացած մասում ամբողջ տարածությունը լրացնելու համար:
Բարի ճանապարհ
Սա մեր ճամպրուկի վերջին CSS- ն է.
.delicate {ցուցադրում: բլոկ; լայնությունը `60%; } .tshirt {display: inline-block; լայնությունը `20%; } .socks {display: inline; }
Ահա մի քանի այլընտրանքային սցենար ՝ ցուցադրման տարբեր կիրառությունները լուսաբանելու համար: Եթե վերեւում գտնվող նրբահամները ունենային ցուցադրում ՝ inline-blockնրանք տեղավորվում էին հենց շապիկների կողքին: Մարզաշապիկների մի մասը տեղափոխվում էր վերևի գիծ, իսկ մնացած մասը համապատասխանաբար հարմարվում էր: Օձիքավոր վերնաշապիկի ձախ և աջ կողմում հարմարավետ բուֆեր չէր լինի:
Եթե յուրաքանչյուր շապիկ ունենար ցուցադրում-բլոկ, դուք կունենաք շապիկների զանգվածային փաթեթ միմյանց վրա, մեկը ՝ մեկ տողի համար: Եթե գուլպաները ունենային ցուցադրում ՝ inline-block, նրանք բոլորը նստելու էին ներքևի շարքում, այլ ոչ թե հոսում էին երկու շարքերի արանքում: Որոշ շապիկներ հրում էին մեկ այլ շարքի վրա ՝ կազմելով չորրորդ գիծ: Մարզաշապիկների միջին շարքի աջ մասում բաց կլինի:
Այստեղ նախանշված մեթոդով մենք հայտնվում ենք կոկիկորեն փաթեթավորված ճամպրուկով, որն առավելագույնս օգտագործում է առկա տարածքը:
Այս հոդվածն ի սկզբանե հայտնվել է ցանց ամսագիր թողարկում 289; գնել այստեղ!
