Sulod sa daghang katuigan, ang CSS floats usa ka malisud, apan gikinahanglan nga bahin sa pagmugna sa mga layout sa website. Kon ang imong desinyo gitawag alang sa daghang mga kolum, ikaw mibalik ngadto sa mga sakayan . Ang problema sa niini nga pamaagi mao nga, bisan pa sa talagsaon nga kamamugnaon nga gipakita sa mga tigdisenyo sa web / mga developers sa pagmugna og komplikadong mga layout sa site, ang CSS floats wala gayud gituyo nga gigamit niining paagiha.
Samtang ang mga floats ug CSS positioning sigurado nga adunay usa ka dapit sa web design alang sa daghang mga katuigan nga moabut, mas bag-o nga mga teknik sa layout lakip na ang CSS Grid ug Flexbox ang naghatag karon sa mga web designers og bag-ong mga paagi sa paghimo sa ilang mga layout sa site. Ang laing bag-ong pamaagi sa paghan-ay nga nagpakita sa daghang potensyal mao ang CSS Multiple Columns.
Ang CSS Columns naglibut sulod sa pipila ka mga tuig karon, apan ang kakulang sa suporta sa mga daan nga mga browsers (nag-una sa mas karaan nga mga bersyon sa Internet Explorer) naghupot sa daghang mga propesyonal sa web gikan sa paggamit niini nga mga estilo sa ilang produksyon nga buhat.
Sa pagtapos sa suporta alang sa mas karaan nga mga bersyon sa IE, ang uban nga mga tigdisenyo sa web karon nag-eksperimento sa mga bag-ong kapilian sa CSS layout, nga nahilakip sa CSS Columns, ug nakakaplag nga sila adunay labaw nga pagkontrol sa mga bag-ong pamaagi kay sa ilang gihimo sa mga gakit.
Ang Mga Sukaranan sa CSS Columns
Sama sa gisugyot sa ngalan niini, ang CSS Multiple Columns (gitawag usab nga CSS3 multi-column layout) nagtugot kanimo sa pagbahin sa sulod ngadto sa usa ka set nga numero sa mga kolum. Ang labing batakan nga mga kabtangan sa CSS nga imong gamiton mao ang:
- column count
- kolum-gintang
Alang sa column-count, imong gitino ang gidaghanon sa mga kolum nga imong gusto. Ang gintang sa kolum mao ang mga gutter o gilay-on tali sa mga kolum. Ang browser mogamit niini nga mga hiyas ug tipikon ang sulod sa gidaghanon sa mga kolum nga imong gisulti.
Ang usa ka kasagaran nga pananglitan sa CSS daghang mga kolum sa praktis mao ang pagbahin sa usa ka block sa sulod sa teksto ngadto sa daghang mga kolum, susama sa unsay imong makita sa usa ka artikulo sa pamantalaan. Ingna nga ikaw adunay mosunod nga markup sa HTML (timan-i nga alang sa panig-ingnan nga mga katuyoan, akong gibutang lamang ang pagsugod sa usa ka parapo, samtang sa praktis adunay lagmit daghang mga parapo sa sulod niini nga markup):
Ang ulohan sa imong artikulo
Hunahunaa ang daghang parapo sa teksto dinhi ...
Kung ikaw unya nagsulat niini nga mga estilo sa CSS:
.content {-moz-column-count: 3; -webkit-column-count: 3; column count: 3; -moz-column-gap: 30px; -webkit-column-gap: 30px; kolum-gintang: 30px; }Ang paghari sa CSS nga magbahin sa "content" division ngadto sa 3 nga managsama nga mga kolum nga adunay gintang nga 30 ka pixel sa tunga nila. Kon gusto nimo ang duha ka kolum imbes nga 3, imo lamang ibaylo ang maong bili ug ang kompiyuter magkalkulo sa bag-ong mga gilapdon sa mga kolum nga bahinon ang sulod sa parehason. Matikdi nga atong gigamit una ang prefix nga kabtangan sa vendor, nga gisundan sa mga dili prefix nga deklarasyon.
Ingon sayon sama niini, ang paggamit niini niining paagiha dili kuwestiyonable alang sa paggamit sa website. Oo, mahimo nimong mabahin ang usa ka pundok sa sulod ngadto sa daghang mga kolum, apan dili kini ang pinakamaayo nga kasinatian sa pagbasa alang sa Web, ilabi na kung ang gitas-on niining mga kolum nahulog ubos sa "fold" sa screen.
Ang mga magbabasa kinahanglan nga mag-scroll pataas ug paubos aron mabasa ang tibuok nga sulod. Bisan pa, ang prinsipal sa CSS Columns ingon ka sayon sa imong makita dinhi, ug kini mahimong magamit sa pagbuhat sa labaw pa kay sa pagbahin sa sulod sa pipila ka mga parapo - kini mahimo, sa pagkatinuod, magamit alang sa layout.
Layout Uban sa CSS Columns
Isulti nga ikaw adunay usa ka webpage nga adunay sulod nga sulod nga adunay tulo ka kolum sa sulod. Kini usa ka tipikal kaayo nga layout sa website, ug aron makab-ot ang 3 nga mga kolum, kasagaran ang imong paglutaw sa mga dibisyon nga naa. Tungod sa CSS multiple-columns, kini mas sayon.
Ania ang pipila ka mga sample HTML:
Pinakabag-o nga Balita
Mga umaabot nga mga panghitabo
p>
Ang CSS aron mahimo kining daghang mga kolum nagsugod sa unsay imong nakita kaniadto:
.content {-moz-column-count: 3; -webkit-column-count: 3; column count: 3; -moz-column-gap: 30px; -webkit-column-gap: 30px; kolum-gintang: 30px; }Karon, ang hagit dinhi mao nga, tungod kay gusto sa browser nga bahinon ang kini nga sulod, busa kung ang gitas-on sa sulod niini nga dibisyon managlahi, nga ang browser sa aktwal mag-split sa sulod sa usa ka dibisyon, nga magdugang sa pagsugod niini ngadto sa usa ka kolum ug dayon magpadayon ngadto sa lain (mahimo nimong makita kini pinaagi sa paggamit niini nga kodigo sa pagpadagan sa eksperimento ug makadugang sa lainlaing gitas-on sa sulod sulod sa matag dibisyon)!
Dili kana ang imong gusto. Gusto nimo nga ang matag usa niini nga dibisyon magtukod og usa ka lahi nga kolum ug, bisan unsa ka dako o gamay ang sulod sa usa ka bahin sa sulod, dili nimo gusto nga kini magbulag. Imong mahimo kini pinaagi sa pagdugang niining usa ka dugang nga linya sa CSS:
.content div {display: inline-block; }Kini mopugos sa mga pagbahin nga anaa sa sulod sa "sulod" nga magpabilin nga wala'y labot bisan pa nga gibahin kini sa browser ngadto sa daghang mga kolum. Bisan mas maayo, tungod kay wala kami mohatag bisan unsa dinhi sa usa ka gilay-on nga gilapdon, kini nga mga kolum awtomatiko nga mag-usab sa paglihok sa paglihok sa browser, nga naghimo kanila nga usa ka sulundon nga aplikasyon alang sa mga responsive nga mga website . Uban sa nga "inline-block" estilo sa dapit, ang matag usa sa imong 3 dibisyon mahimong usa ka lahi nga kolum sa sulod.
Paggamit sa Column-Lapth
Adunay laing kabtangan gawas sa "column-count" nga imong magamit, ug depende sa imong mga kinahanglanon sa paghan-ay, kini mahimong usa ka mas maayo nga pagpili alang sa imong site. Kini ang "kolum-kolor". Pinaagi sa paggamit sa sama nga markup sa HTML sama sa gipakita kaniadto, mahimo namong mahimo kini pinaagi sa among CSS:
.content {-moz-column-width: 500px; -webkit-column-width: 500px; Column-width: 500px; -moz-column-gap: 30px; -webkit-column-gap: 30px; kolum-gintang: 30px; } .content div {display: inline-block; }Ang paagi nga kini magamit mao nga ang browser naggamit niini nga "column-width" ingon nga ang kinadak-ang bili niana nga kolum. Busa kon ang bintana sa browser dili moabut sa 500 ka pixel ang gilapdon, kining tulo nga mga dibisyon makita sa usa ka kolum, usa sa mga tumoy sa lain. Kini usa ka tipikal nga layout nga gigamit alang sa mobile / small screen layouts.
Samtang ang tibuuk nga browser nag-uswag aron mahimong igo nga igo aron makahaom sa 2 kolum lakip ang ginganlan nga mga gintang nga kolum, ang awtomatik nga pag-abut sa browser gikan sa usa ka han-ay nga kolum sa duha ka kolum. Padayon nga dugangi ang lapad sa screen ug sa kadugayan, makakuha ka og usa ka 3 kolum nga disenyo, nga ang matag usa sa among 3 nga mga dibisyon gipakita sa ilang kaugalingong kolum. Pag-usab, kini usa ka maayong paagi nga makakuha og pipila ka mga responsive, multi-device nga mahanduraw nga mga palibut, ug dili kinahanglan nga gamiton ang mga pangutana sa media aron mausab ang estilo sa layout!
Ang ubang mga Properties sa Column
Gawas pa sa mga kabtangan nga gisakop dinhi, adunay mga kabtangan usab alang sa "column-rule", lakip na ang kolor, estilo, ug gilapdon nga mga hiyas nga nagtugot kanimo paghimo og mga lagda tali sa imong mga kolum. Kini gamiton imbis nga mga utlanan kon gusto nimo nga adunay mga linya nga magbulag sa imong mga haligi.
Panahon sa Eksperimento
Sa pagkakaron, ang CSS Multiple Column Layout maayo kaayo nga gisuportahan. Uban sa mga prefix, sobra sa 94% sa mga tiggamit sa web ang makahimo sa pagtan-aw niini nga mga estilo, ug kadtong dili suportadong pundok mas maayo pa nga mas daghan nga mga bersyon sa Internet Explorer nga dili nimo mahimo nga bisan unsa pa.
Uban niini nga lebel sa suporta karon sa dapit, walay rason nga dili magsugod sa pag-eksperimento sa CSS Columns ug pagdeploy niini nga mga estilo sa paghimo sa mga andam nga mga website. Mahimo nimo sugdan ang imong mga eksperimento gamit ang HTML ug CSS nga gipresentar sa niini nga artikulo ug mag-play sa palibot nga adunay nagkalainlain nga mga prinsipyo aron makita kung unsa ang labing maayo nga mahimo alang sa mga kinahanglanon sa layout sa imong site.