Շատ երկար տարիներ CSS- ն փչում է դյուրին, բայց անհրաժեշտ, բաղադրիչ `կայքի դասավորության ստեղծման համար: Եթե ձեր դիզայնը կոչվում է բազմակի սյունակ, դուք դիմել եք փչովի : Այս մեթոդի հետ կապված խնդիրն այն է, որ չնայած անհավանական սրամտությամբ, որ վեբ դիզայներները / ծրագրավորողները ցույց են տվել բարդ site դասավորության ստեղծման մեջ, CSS- ն երբեւէ չի օգտագործվել այս ձեւով:
Թեեւ փչում եւ CSS դիրեկտորացիան վստահ են, որ երկար տարիներ վեբ դիզայնի տեղ ունենալու դեպքում նոր դասավորության մեթոդները, ներառյալ CSS Grid- ը եւ Flexbox- ն այժմ վեբ դիզայներներին տալիս են նոր ձեւեր, իրենց կայքի դասավորությունը ստեղծելու համար: Մեկ այլ նոր դասավորության տեխնիկան, որը ցույց է տալիս շատ ներուժ, CSS Multiple Columns- ը:
CSS Columns- ը արդեն մի քանի տարի է, ինչ եղել է, սակայն ավելի մեծ բրաուզերներում (հատկապես Internet Explorer- ի նախկին տարբերակները) աջակցություն չունեն, շատ վեբ մասնագետներ պահպանում են այդ ոճերը իրենց արտադրական աշխատանքում:
IE- ի այդ հին տարբերակների աջակցության ավարտից որոշ վեբ դիզայներներ այժմ փորձարկում են նոր CSS դասավորության ընտրանքները, CSS- ի սյունակները ներառված են եւ գտնում են, որ նրանք ավելի շատ վերահսկողություն ունեն այս նոր մոտեցումների հետ, քան նրանք անցել են լողում:
CSS սյունակների հիմունքները
Քանի որ նրա անունը ենթադրում է, CSS բազմակի սյունակները (նաեւ հայտնի են որպես CSS3 բազմաբնույթ սյունակ) թույլ են տալիս բովանդակություն բաժանել մի շարք սյունակներում: CSS- ի առավելագույն հատկանիշները, որոնք դուք օգտագործում եք հետեւյալն են.
- սյունակ-հաշվարկ
- սյունակ-բացը
Սյունակում հաշվարկելու համար նշեք ձեր ցանկալի սյունակների քանակը: Սյունակի զիջումը կլինի սալիկների միջեւ ընկած գոտիները կամ միջակայքերը: Զննարկիչը այս արժեքներն է վերցնում եւ բովանդակությունը պարունակում է նույնը, ձեր նշած սյունակների թիվը:
CSS- ի բազմակի սյունակների ընդհանուր օրինակները գործնականում պետք է լինեն տեքստի բովանդակության բլոկը բաժանել բազմակի սյունակներում, ինչն էլ կտեսնեք թերթի հոդվածում: Ասեք, որ ունեք հետեւյալ HTML նշումը (նշեք, որ օրինակ, նպատակների համար, ես միայն մեկ պարբերության սկիզբ եմ դնում, իսկ գործնականում, հավանական է, այս բովանդակության պարունակության բազմակի պարբերությունները):
Ձեր հոդվածի վերնագիր
Պատկերացրեք շատ տեքստի տեքստեր այստեղ ...
Եթե դուք գրել եք այս CSS ոճերը,
.content {-moz-column-count: 3; -վեբիտ-սյունակ-հաշվիչ: 3; column-count: 3; -Moz-column-gap: 30px; -webkit-column-gap: 30px; column-gap: 30px; }Այս CSS կանոնը կարող էր բաժանել «բովանդակության» բաժանումը 3 հավասար սյունակներում, նրանց միջեւ 30 պիքսել հեռավորության հետ: Եթե դուք ուզում եք 3-ի փոխարեն երկու սյունակ, դուք պարզապես փոխեք այդ արժեքը, եւ զննարկիչը կկարողանա հաշվարկել այդ սյունակների նոր լայնությունները `բովանդակությունը պառակտելու համար: Ուշադրություն դարձրեք, որ մենք առաջին հերթին օգտագործում ենք վաճառողը, նախորդող հատկությունները, որին հաջորդում են չհրատարակված հայտարարությունները:
Որքան էլ հեշտ լինի, դրա օգտագործումը կասկածելի է կայքի օգտագործման համար: Այո, կարող եք մի քանի բովանդակություն բաժանել մի քանի սյունակներում, բայց դա չի կարող լինել վեբի համար լավագույն ընթերցանության փորձը, հատկապես, եթե այս սյուների բարձրությունը ընկնում է էկրանի «կողքին»:
Այնուհետեւ ընթերցողները պետք է ոլորել վերեւ եւ ներքեւ, որպեսզի լրացնեն ամբողջական բովանդակությունը: Այնուամենայնիվ, CSS Columns- ի տնօրենն այնքան հեշտ է, որքան տեսնում եք այստեղ, եւ այն կարող է օգտագործվել ավելի շատ անելուց, քան պարզապես պարբերությունների բովանդակությունը բաժանելը, այն կարող է իրականում օգտագործվել դասավորության համար:
Ստեղծեք CSS սյունակներով
Ասեք, որ դուք ունեք բովանդակության տարածք ունեցող կայք, որը ունի 3 բովանդակություն: Սա շատ տիպիկ կայքերի դասավորություն է եւ հասնել այդ 3 սյունակին, դուք սովորաբար բախում եք բաժանումներին, որոնք գտնվում են CSS- ի բազմակի սյուներով, դա շատ ավելի հեշտ է:
Ահա որոշ նմուշ HTML:
Վերջին Լուրեր
Բովանդակությունը կգնա այստեղ ...
Հաջորդ միջոցառումներ
Բովանդակությունը կգնա այստեղ ...
p>
CSS- ի այս բազմակի սյունակները սկսելու համար սկսվում է այն, ինչ տեսել եք նախկինում:
.content {-moz-column-count: 3; -վեբիտ-սյունակ-հաշվիչ: 3; column-count: 3; -Moz-column-gap: 30px; -webkit-column-gap: 30px; column-gap: 30px; } Այժմ խնդիրը կայանում է նրանում, որ զննարկիչը ցանկանում է, որ այս բովանդակությունը միանգամայն բաժանվի, այնպես որ, եթե այդ բաժանմունքների բովանդակության երկարությունը տարբեր է, այդ զննարկիչը փաստորեն բաժանելու է առանձին բաժնի բովանդակությունը, ավելացնելով դրա մեկնարկը մեկ սյունակում եւ ապա շարունակեք մյուսը (դուք կարող եք տեսնել սա, օգտագործելով այս կոդը, փորձարկելու եւ յուրաքանչյուր բաժնի ներսում տարբեր բովանդակություն ավելացնելու համար):
Դա այն չէ, ինչ ուզում եք: Ցանկանում եք, որ այս ստորաբաժանումներից յուրաքանչյուրը ստեղծի հստակ սյունակ եւ անկախ նրանից, թե որքան մեծ կամ փոքր է անհատական բաժնի բովանդակությունը, դուք երբեք չեք ուզում բաժանվել: Դուք կարող եք հասնել այն, ավելացնելով այս մեկ լրացուցիչ գիծ CSS- ում:
.content div {դրսեւորում `inline-block; } Սա ստիպելու է «բովանդակության» մեջ գտնվող այդ բաժինները մնալ անփոփոխ, նույնիսկ այն բանից հետո, երբ զննարկիչը բաժանում է մի քանի սյունակ: Նույնիսկ ավելի լավ է, քանի որ այստեղ ոչինչ չենք տվել հաստատուն լայնությամբ, այդ սյուները ավտոմատ կերպով կկրճատվեն, քանի որ զտիչը վերափոխում է, դարձնելով դրանք իդեալական դիմում պատասխանող կայքերում : Այդ «inline-block» ոճով տեղում, ձեր 3 ստորաբաժանումներից յուրաքանչյուրը կլինի բովանդակության հստակ սյունակ:
Օգտագործելով սյունակի լայնությունը
Կա մեկ այլ գույք, բացի «սյունակ-հաշվարկից», որը կարող եք օգտագործել, եւ կախված ձեր տեղադրման կարիքներից, այն կարող է իրականում ավելի լավ ընտրություն ունենալ ձեր կայքի համար: Սա «սյունակ լայնություն» է: Օգտագործելով նույն HTML ձեւաչափը, ինչպես ցույց է տրված նախկինում, մենք կարող ենք դա անել մեր CSS- ի միջոցով:
.content {-moz-column-width: 500px; -հրամանատար-սյունակ լայնությունը `500px; սյունակի լայնությունը `500px; -Moz-column-gap: 30px; -webkit-column-gap: 30px; column-gap: 30px; } .content div {display: inline-block; } Ինչպես է այն աշխատում, որ զննարկիչը օգտագործում է այս «սյունակը լայնությունը» որպես այդ սյունակի առավելագույն արժեքը: Այսպիսով, եթե զննարկիչի պատուհանը 500 պիքսելից պակաս է, այս երեք բաժինները կհայտնվեն մեկ սյունակում, մեկը մյուսի գագաթներից մեկը: Սա բնորոշ դասավորություն է, որը նախատեսված է բջջային / փոքր էկրանների դասավորության համար:
Քանի որ զննարկիչի լայնությունը մեծանում է, բավականաչափ խոշոր է, սահուն սյունակների հետ միասին տեղադրելու 2 սյուները, զննարկիչը ինքնաբերաբար կթողնի մեկ սյունակի դասավորությունից երկու սյունակ: Պահպանեք էկրանի լայնությունը եւ, ի վերջո, կստանաք 3 սյունակային դիզայն, յուրաքանչյուր 3 բաժիններից յուրաքանչյուրը ցուցադրվում է իրենց սյունակում: Կրկին, սա հիանալի միջոց է որոշակի արձագանքող, բազմաբնույթ սարքի բարեկամական դասավորության համար, եւ նույնիսկ կարիք չկա օգտագործել լրատվամիջոցների հարցումները , փոխելու դասավորության ոճերը:
Այլ սյունակային հատկություններ
Բացի այս հատկանիշներից, կան նաեւ «սյունակային կանոն» հատկանիշներ, ներառյալ գույնը, ոճը եւ լայնության արժեքները, որոնք թույլ են տալիս ստեղծել կանոններ ձեր սյուների միջեւ: Դրանք կկիրառվեն սահմանների փոխարեն, եթե ցանկանում եք ձեր սյունակները բաժանող որոշ գծեր ունենալ:
Ժամանակի փորձ
Ներկայումս CSS- ի բազմակի սյունակային դասավորությունը շատ լավ է ապահովված: Նախակրթությունների արդյունքում վեբ-ի 94% -ից ավելի օգտվողներ կարող են տեսնել այդ ոճերը, եւ այդ չաջակցվող խումբը իսկապես պարզապես Internet Explorer- ի շատ ավելի հին տարբերակները կդառնա, որոնք, ամենայն հավանականությամբ, չես աջակցում:
Այժմ այդ աջակցության մակարդակով, ոչ մի պատճառ չկա, որ CSS սյունակներում փորձարկեք եւ այդ ոճերը տեղադրեք արտադրական պատրաստված կայքերում: Դուք կարող եք սկսել ձեր փորձերը այս հոդվածում ներկայացված HTML- ի եւ CSS- ի միջոցով եւ տարբեր արժեքներով խաղալ, տեսնել, թե ինչ է լավագույնը աշխատելու Ձեր կայքի տեղադրման կարիքների համար:
Հաջորդ միջոցառումներ
Բովանդակությունը կգնա այստեղ ...
p>
CSS- ի այս բազմակի սյունակները սկսելու համար սկսվում է այն, ինչ տեսել եք նախկինում:
.content {-moz-column-count: 3; -վեբիտ-սյունակ-հաշվիչ: 3; column-count: 3; -Moz-column-gap: 30px; -webkit-column-gap: 30px; column-gap: 30px; }Այժմ խնդիրը կայանում է նրանում, որ զննարկիչը ցանկանում է, որ այս բովանդակությունը միանգամայն բաժանվի, այնպես որ, եթե այդ բաժանմունքների բովանդակության երկարությունը տարբեր է, այդ զննարկիչը փաստորեն բաժանելու է առանձին բաժնի բովանդակությունը, ավելացնելով դրա մեկնարկը մեկ սյունակում եւ ապա շարունակեք մյուսը (դուք կարող եք տեսնել սա, օգտագործելով այս կոդը, փորձարկելու եւ յուրաքանչյուր բաժնի ներսում տարբեր բովանդակություն ավելացնելու համար):
Դա այն չէ, ինչ ուզում եք: Ցանկանում եք, որ այս ստորաբաժանումներից յուրաքանչյուրը ստեղծի հստակ սյունակ եւ անկախ նրանից, թե որքան մեծ կամ փոքր է անհատական բաժնի բովանդակությունը, դուք երբեք չեք ուզում բաժանվել: Դուք կարող եք հասնել այն, ավելացնելով այս մեկ լրացուցիչ գիծ CSS- ում:
.content div {դրսեւորում `inline-block; }Սա ստիպելու է «բովանդակության» մեջ գտնվող այդ բաժինները մնալ անփոփոխ, նույնիսկ այն բանից հետո, երբ զննարկիչը բաժանում է մի քանի սյունակ: Նույնիսկ ավելի լավ է, քանի որ այստեղ ոչինչ չենք տվել հաստատուն լայնությամբ, այդ սյուները ավտոմատ կերպով կկրճատվեն, քանի որ զտիչը վերափոխում է, դարձնելով դրանք իդեալական դիմում պատասխանող կայքերում : Այդ «inline-block» ոճով տեղում, ձեր 3 ստորաբաժանումներից յուրաքանչյուրը կլինի բովանդակության հստակ սյունակ:
Օգտագործելով սյունակի լայնությունը
Կա մեկ այլ գույք, բացի «սյունակ-հաշվարկից», որը կարող եք օգտագործել, եւ կախված ձեր տեղադրման կարիքներից, այն կարող է իրականում ավելի լավ ընտրություն ունենալ ձեր կայքի համար: Սա «սյունակ լայնություն» է: Օգտագործելով նույն HTML ձեւաչափը, ինչպես ցույց է տրված նախկինում, մենք կարող ենք դա անել մեր CSS- ի միջոցով:
.content {-moz-column-width: 500px; -հրամանատար-սյունակ լայնությունը `500px; սյունակի լայնությունը `500px; -Moz-column-gap: 30px; -webkit-column-gap: 30px; column-gap: 30px; } .content div {display: inline-block; }Ինչպես է այն աշխատում, որ զննարկիչը օգտագործում է այս «սյունակը լայնությունը» որպես այդ սյունակի առավելագույն արժեքը: Այսպիսով, եթե զննարկիչի պատուհանը 500 պիքսելից պակաս է, այս երեք բաժինները կհայտնվեն մեկ սյունակում, մեկը մյուսի գագաթներից մեկը: Սա բնորոշ դասավորություն է, որը նախատեսված է բջջային / փոքր էկրանների դասավորության համար:
Քանի որ զննարկիչի լայնությունը մեծանում է, բավականաչափ խոշոր է, սահուն սյունակների հետ միասին տեղադրելու 2 սյուները, զննարկիչը ինքնաբերաբար կթողնի մեկ սյունակի դասավորությունից երկու սյունակ: Պահպանեք էկրանի լայնությունը եւ, ի վերջո, կստանաք 3 սյունակային դիզայն, յուրաքանչյուր 3 բաժիններից յուրաքանչյուրը ցուցադրվում է իրենց սյունակում: Կրկին, սա հիանալի միջոց է որոշակի արձագանքող, բազմաբնույթ սարքի բարեկամական դասավորության համար, եւ նույնիսկ կարիք չկա օգտագործել լրատվամիջոցների հարցումները , փոխելու դասավորության ոճերը:
Այլ սյունակային հատկություններ
Բացի այս հատկանիշներից, կան նաեւ «սյունակային կանոն» հատկանիշներ, ներառյալ գույնը, ոճը եւ լայնության արժեքները, որոնք թույլ են տալիս ստեղծել կանոններ ձեր սյուների միջեւ: Դրանք կկիրառվեն սահմանների փոխարեն, եթե ցանկանում եք ձեր սյունակները բաժանող որոշ գծեր ունենալ:
Ժամանակի փորձ
Ներկայումս CSS- ի բազմակի սյունակային դասավորությունը շատ լավ է ապահովված: Նախակրթությունների արդյունքում վեբ-ի 94% -ից ավելի օգտվողներ կարող են տեսնել այդ ոճերը, եւ այդ չաջակցվող խումբը իսկապես պարզապես Internet Explorer- ի շատ ավելի հին տարբերակները կդառնա, որոնք, ամենայն հավանականությամբ, չես աջակցում:
Այժմ այդ աջակցության մակարդակով, ոչ մի պատճառ չկա, որ CSS սյունակներում փորձարկեք եւ այդ ոճերը տեղադրեք արտադրական պատրաստված կայքերում: Դուք կարող եք սկսել ձեր փորձերը այս հոդվածում ներկայացված HTML- ի եւ CSS- ի միջոցով եւ տարբեր արժեքներով խաղալ, տեսնել, թե ինչ է լավագույնը աշխատելու Ձեր կայքի տեղադրման կարիքների համար: