Mo le tele o tausaga, o le CSS floats o se mea e leai se totogi, ae manaʻomia, vaega i le fausiaina o laupepa o luga o le upega tafaʻilagi. Afai o lau mamanu e telefoni mo le tele o koluma, na e liliu atu i luga o vaʻa . O le faʻafitauli i lenei auala o le, e ui lava i le maoae o le poto masani na faʻaalia e le au faipisinisi / tagata atinaʻe i le fatuina o ni laasaga faʻanatura, e le faapea na faʻaaoga moni le sailiga o le CSS i lenei auala.
E ui lava o fusi ma le CSS tulaga e tatau ona i ai se nofoaga i le initaneti mo le tele o tausaga o le a oʻo mai, o laasaga fou e aofia ai le CSS Grid ma le Flexbox o loʻo tuuina atu nei i luga o le initaneti ni auala fou e fausia ai o latou laasaga. O le isi auala fou o loʻo faʻaalia ai le tele o mea e mafai ona fai, o CSS Multi Columns.
O CSS Columns sa i ai mo ni nai tausaga i le taimi nei, ae leai se lagolago i luga o sailiga matutua (o le tele o tausaga matutua o Internet Explorer) o loʻo tausia le tele o polofesa i luga o le initaneti mai le faʻaaogaina o nei sitaili i la latou galuega gaosiga.
Faatasi ai ma le faaiuga o le lagolago mo na lomiga matutua o le IE, o loo i ai nei nisi o polofesa i luga o le initaneti o loo faataitai nei i le fuafuaga fou a le CSS, CSS Columns e aofia ai, ma le mauaina o le sili atu o le puleaina o nei auala fou nai lo le mea na latou faia i tagata fetolofi.
Faʻavae o CSS Columns
E pei ona taʻu mai e lona igoa, CSS Multiple Columns (lea e lauiloa foi o le CSS3 multi-column setting) e mafai ai ona e vaevaeina mea i totonu o se seti seti o koluma. O mea pito sili ona taua o le CSS o le a e faaaogaina o:
- koluma faitau
- koluma-avanoa
Mo le numera-faitau, e te faʻamaonia le numera o koluma e te manaʻo ai. O le vaeluaina o le koluma o le a avea ma vavae poʻo le vaeluaina o na koluma. O le a ave e le masini nei tulaga faatauaina ma vaeluaina ia mea i totonu o le numera o koluma e te faamaotiina.
O se faʻataʻitaʻiga masani o le tele o koluma o le CSS i le faʻatinoga, o le vavaeina lea o poloka o tusitusiga i totonu o koluma e tele, e talitutusa ma mea o le ae vaaia i totonu o se nusipepa. Fai mai oe maua le siata HTML o loʻo i lalo (ia maitauina e faʻapea, mo se faʻataʻitaʻiga, o loʻo na o le tuʻuina atu o le amataga o le parakalafa e tasi, ae o le faʻatinoga atonu o le a tele parakalafa o mea o loʻo i ai i lenei faailoga):
O le ulutala o lau tusiga
Vaai faalemafaufau i le tele o palakalafa o tusitusiga iinei ...
Afai na e tusia nei ituaiga o CSS:
.content {-moz-column-count: 3; -o le komepiuta-faitauga-count: 3; tolu-faitau: 3; -moz-column-gap: 30px; -o le osofaʻiga-faʻapipiʻi-avanoa: 30px; koluma-vaelua: 30px; }O lenei tulafono a le CSS o le a vaevaeina le vaevaega o le "content" i 3 tutusa koluma ma se avanoa o le 30 pika i le va oi latou. Afai e te manaʻo i ni koluma se lua nai lo le 3, o le ae faigofie ona suia lena tau ma o le a fuafuaina e le masini le lautele lautele o na koluma e vaeluaina ai mea uma. Faʻamatalaga matou te faʻaaoga uluai meatotino faʻatau oloa, sosoo ai ma faʻamatalaga e leʻi faia muamua.
E pei lava o le faigofie, o lona faʻaogaina i lenei auala e faigata tele mo le faʻaaogaina i luga o le upega tafaʻilagi. Ioe, e mafai ona e vaevaeina le tele o mataupu i ni koluma se tele, ae atonu o le a le o se faitauga aupito sili lea mo le Upega, aemaise lava pe afai o le maualuga o nei koluma e pau i lalo ifo o le "fold" o le mata.
Ona tatau loa lea i le au faitau ona tafe i luga ma lalo ina ia mafai ai ona faitau le anotusi atoa. Ae, o le puleaoga o le CSS Columns e faigofie pei o loʻo e vaʻaia iinei, ma e mafai ona faʻaaoga e faia le tele o mea nai lo na o le vaeluaina o mataupu o nisi palakalafa - e mafai, e moni, ona faʻaaogaina mo le faʻatulagaga.
Lisi ma CSS Columns
Taʻu atu o loʻo i ai sau itulau i luga o le upega tafaʻilagi ma se vaega o loʻo i ai mea e tolu o koluma. O se laupepa telefoni feaveaʻi masani, ma ia ausia ia 3 koluma, o le a masani ona e fofoina ia vaega o loʻo i ai. Faatasi ai ma CSS multi-columns, e sili atu ona faigofie.
O nisi nei o faʻataʻitaʻiga HTML:
Latest News
O le a aoga le mea iinei ...
Mai la Tatou Blog
O le a alu le mea i ai iinei ...
Mea e tutupu i le lumanai
O le a alu le mea iinei ...
O le CSS e amata nei koluma amata i mea na e vaʻaia muamua:
.content {-moz-column-count: 3; -o le komepiuta-faitauga-count: 3; tolu-faitau: 3; -moz-column-gap: 30px; -o le osofaʻiga-faʻapipiʻi-avanoa: 30px; koluma-vaelua: 30px; }I le taimi nei, o le luitau i le mea lea, talu ai o loʻo manaʻomia e le 'initaneti le vaevaeina lelei o nei mea, a faʻapea o le umi o mataupu o nei vaevaega e ese, o le a vaeluaina ai e le masini le mea o loʻo i ai i le vaevaega, faʻaopoopoina i le tasi koluma ona faʻaauau lea i le isi (e mafai ona e vaʻai i lenei mea e ala i le faʻaaogaina o lenei tulafono e faʻataʻitaʻi ai se suʻega ma faʻaopopo ni uumi o mataupu i totonu o vaega taitasi)!
E le o le mea lena e te manaʻo ai. E te manaʻo i nei vaevaega ia fatuina se koluma maʻoti ma, e tusa lava po o le a le telē po o le itiiti o le mea o loʻo i ai i vaega taʻitasi, e te le manaʻo e vaevaeina. E mafai ona ausia lenei mea e ala i le faaopoopoina o lenei laina faaopoopo ole CSS:
.extent divisible: inline-block; }O lenei mea o le a faʻamalosia ai na vaevaega o loʻo i ai i totonu o le '' anotusi '' ina ia tumau pea le faʻamaonia e pei lava ona vaeluaina e le masini lenei i ni koluma se tele. E sili atu foi, talu ai tatou te leʻi tuʻuina atu se mea iinei i se lautele lautele, o nei koluma o le a otometi lava ona toe faʻaaogaina ao faʻaogaina le masini, avea ma faʻataʻitaʻiga lelei mo 'upega tafaʻilagi tali mai . Faʻatasi ai ma lena "laina inline-block" i le tulaga, o auvaega uma e tolu o le a avea o se koluma vaʻaia o anotusi.
Faʻaaogaina o le Lisi-lautele
O loʻo i ai se isi meatotino e ese mai i le "numera o faitauga" e mafai ona e faʻaaogaina, ma e fuafua lava i ou tulaga faatulagaina, atonu o le a sili atu le filifilia mo lau 'upega tafaʻilagi. O le "laina lautele". I le faʻaaogaina o le faailoga HTML e pei ona faʻaalia muamua, e mafai ona tatou faia lenei mea i la tatou CSS:
.content {-moz-column-width: 500px; -o le osofaʻiga-lautele-lautele: 500px; koluma-lautele: 500px; -moz-column-gap: 30px; -o le osofaʻiga-faʻapipiʻi-avanoa: 30px; koluma-vaelua: 30px; } .content div demonstration: inline-block; }O le auala e galue ai lenei mea o le faʻaaogaina e le 'upega tafaʻilagi lenei "koluma lautele" e avea ma tau maualuga o lena koluma. Ma afai o le fenumiai o le sailiga e itiiti ifo ma le 500 pika lautele, o nei vaega e 3 o le a faaalia i se koluma se tasi, o le tasi pito o le isi. O se faʻafanua masani lea e faʻaaogaina mo taʻavale / televise matala.
A o faateleina le lautele o le masini o le masini e fetaui ma 2 koluma faatasi ai ma vaeluaina o koluma, o le a otometi lava ona alu le masini mai se laina se tasi i le laina e lua i koluma. Faʻateleina le lautele o lauulu ma mulimuli ane, o le ae maua se 3 koluma mamanu, ma o tatou vaega uma e tolu o loʻo faʻaalia i la latou lava koluma. Ma le isi, o se auala sili lea e maua ai ni tali faʻafeiloaʻi, tele-telefoni feaveaʻi , ma e te le manaʻomia foʻi le faʻaogaina o fesili o le aufaasālalau e suia ai laasaga o laʻau!
Isi Fale Faʻasologa
I le faaopoopo atu i meatotino o lo o ufiufi iinei, o loʻo i ai foi meatotino mo le "tulafono-tulafono", e aofia ai le lanu, foliga, ma le lautele o tulaga faatauaina e mafai ai ona e faia tulafono i le va o au koluma. O nei mea e faʻaaoga nai lo tuaoi pe afai e te manaʻo e iai ni laina e vavae ese ai au koluma.
Taimi e Faʻailoa ai
I le taimi nei, e lagolagoina lelei le Taiala Lisi Lisi o le CSS. Faatasi ai ma prefixes, e sili atu i le 94% o tagata faaaoga i luga o le upega tafailagi o le a mafai ona vaai i nei sitaili, ma o lena vaega e le mautonu o le a avea ma matua matutua o Internet Explorer lea atonu o le ae le toe lagolagoina.
Faatasi ai ma lenei laasaga o le lagolago i le taimi nei, e leai se mafuaaga e le amata ai ona faataitai i kolisi CSS ma faʻaaogaina nei sitaili i le gaosiga o upega tafaʻilagi. E mafai ona e amata au suʻega e faʻaaoga ai le HTML ma le CSS o loʻo tuʻuina atu i lenei tusiga ma taʻalo faʻatasi ma tulaga faʻataʻatia e iloa ai poʻo le a le mea e sili ona aoga mo manaʻoga o le laiga o lau 'upega tafaʻilagi.