Tau ntau xyoo, CSS floats tau ua finicky, tseem tsim nyog, tivthaiv hauv kev tsim cov website layouts. Yog tias koj tus qauv hu ua ntau kab, koj tig mus rau floats . Qhov teeb meem nrog rau hom no yog tias, txawm tias tsis muaj qhov zoo kawg nkaus ingenuity tias cov kws tsim tawm / cov tsim tawm hauv kev tsim tawm hauv kev tsim cov txheej txheem hauv layouts, CSS floats twb yeej tsis tau xav siv los ua li no.
Thaum ntab thiab CSS qhov chaw yuav tsum muaj qhov chaw nyob rau hauv lub web tsim ntau xyoo los, cov txheej txheem tshiab dua li CSS Grid thiab Flexbox yog tam sim no muab cov qauv tsim muaj hauv internet los tsim lawv qhov chaw layouts. Ib qho tshiab txheej txheem txheej txheem uas qhia tau hais tias ntau ntawm cov peev xwm yog CSS Ntau Txhua.
CSS Txhua tau nyob ze rau ob peb xyoos tam sim no, tab sis tsis muaj kev pab hauv cov laus dua cov neeg siv browsers (cov laus hauv versions ntawm Internet Explorer) tau khaws ntau cov neeg ua haujlwm los ntawm kev siv cov yeeb yam no rau lawv cov haujlwm.
Nrog rau qhov kawg ntawm kev txhawb nqa rau IE, qee cov neeg tsim qauv web tsim tam sim no sim nrog CSS qhov kev xaiv tshiab, CSS Txhua qhov chaw, thiab nrhiav tau tias lawv muaj kev tswj ntau nrog cov kev tshiab no dua li tau nrog cov floats.
Tsim txhua yam ntawm CSS Txhua
Raws li nws lub npe qhia, CSS ntau txhua (kuj paub li CSS3 ntau qhov kev layout) tso cai rau koj faib cov ntsiab lus rau hauv ib pawg tsawg. CSS cov khoom uas koj yuav siv tshaj plaws yog:
- column-suav
- kem-kis
Rau kem-suav, koj qhia kom meej pes tsawg ntawm txhua qhov koj xav tau. Sab nraud ntawm sab nrauv yuav tsum tau txhaws lossis sib kis ntawm cov kab. Qhov browser yuav siv cov kev cai no thiab faib cov ntsiab lus sib npaug rau hauv cov xov tooj ntawm txhua qhov koj teev.
Ib qho piv txwv ntawm CSS ntau hauv kev xyaum yuav tsum faib ib qho ntawm cov ntawv nyeem hauv cov kab ntau, zoo ib yam li koj yuav pom hauv tsab ntawv ceeb toom xov xwm. Hais tias koj muaj cov cim HTML nram qab no (nco ntsoov tias piv txwv, kuv tsuas yog pib cov pib ntawm ib pawg lus, thaum nyob rau hauv kev xyaum muaj feem ntau yuav muaj ntau yam ntawm cov ntsiab lus ntawm qhov cim no):
Xav txog ntau ntau cov lus ntawm cov ntawv nyeem ntawm no ...
Yog tias koj tau sau cov qauv CSS no:
.content {-moz-column-count: 3; -webkit-kem-suav: 3; kem-suav: 3; -moz-column-gap: 30px; -webkit-kem-kis: 30px; kem-kis: 30px; }Txoj cai CSS no yuav faib qhov "content" rau 3 qhov sib npaug ntawm txhua qhov sib txawv ntawm 30 pixels ntawm lawv. Yog hais tias koj xav tau ob kab es tsis txhob 3, koj tsuas xav hloov qhov ntawd thiab qhov browser yuav xam cov tshiab dav ntawm cov kab los faib cov ntsiab lus sib npaug. Daim ntawv ceeb toom hais tias peb yuav siv cov khoom cog khoom ua ntej, ua raws li cov lus tshaj tawm uas tsis yog prefixed.
Li yooj yim li qhov no, nws siv nyob rau hauv no txoj kev yog questionable rau lub website siv. Tau, koj tuaj yeem faib ib pawg ntawm cov ntawv ua ntau kab, tab sis qhov no yuav tsis yog qhov kev nyeem ntawv zoo tshaj plaws rau Web, tshwj xeeb tshaj yog tias qhov siab ntawm cov kab no poob rau hauv qab ntawm "fold" ntawm qhov screen.
Cov nyeem tau ces yuav tsum tau nce thiab nqis kom thiaj nyeem tau cov ntawv qhia tag nrho. Tseem, tus thawj xibfwb ntawm CSS Columns yog ib qho yooj yim li koj pom ntawm no, thiab nws yuav siv tau los ua ntau ntau tshaj li faib cov ntsiab lus ntawm qee cov lus - nws muaj peev xwm, qhov tseeb, raug siv rau kev teeb tsa.
Layout Nrog CSS Txhua
Hais tias koj muaj ib lub vev xaib nrog ib cheeb tsam ntsiab lus uas muaj 3 kab hauv cov ntsiab lus. Qhov no yog lub website zoo nkauj heev, thiab ua kom tiav cov kab 3, koj yuav nquag ntab cov divisions uas nyob rau hauv. Nrog CSS ntau-kab, nws yog qhov yooj yim heev.
Ntawm no yog ib co qauv HTML:
Xovxwm
Cov ntsiab lus yuav tuaj rau ntawm no ...
Cov ntsiab lus yuav tuaj rau ntawm no ...
Yavtom ntej txheej xwm
Cov ntsiab lus yuav mus rau ntawm no ...
Qhov CSS ua kom cov kab ntau ntawm no pib nrog qhov koj pom yav tas los:
.content {-moz-column-count: 3; -webkit-kem-suav: 3; kem-suav: 3; -moz-column-gap: 30px; -webkit-kem-kis: 30px; kem-kis: 30px; }Tam sim no, qhov kev sib tw ntawm no yog qhov, vim tias tus browser xav faib cov ntsiab lus no tusyaj, yog li cov ntsiab lus ntev ntawm cov kev sib cais no sib txawv, qhov browser yuav tau faib cov ntsiab lus ntawm ib leeg neeg, ntxiv rau nws mus rau ib kem thiab tom qab ntawd txuas ntxiv mus rau lwm tus (koj tuaj yeem pom qhov no los ntawm kev siv txoj cai no los khiav qhov kev sim thiab ntxiv ntau ntau cov ntsiab lus hauv txhua pawg)!
Qhov ntawd tsis zoo li koj xav tau. Koj xav kom txhua qhov ntawm cov haujlwm no los tsim ib kem thiab tsis muaj teeb meem loj npaum li cas los yog tsawg dua qhov kev faib tawm ntawm cov neeg ntawd, koj yeej tsis xav kom muab faib. Koj tuaj yeem ua tau qhov no los ntawm kev ntxiv no ib qho ntxiv ntawm CSS:
.content div {zaub: inline-block; }Qhov no yuav yuam kom cov kev sib cais uas yog sab hauv ntawm cov "ntsiab lus" kom nyob tsis tau li txawm tias qhov browser txuas rau hauv ntau kab. Txawm tias zoo dua, vim peb tsis muab txhua yam ntawm no ib qhov dav dav, cov kab no yuav cia li muab kho dua ua qhov browser, ua rau lawv ua tau zoo rau cov ntawv teb . Nrog qhov "inline-block" style, txhua yam ntawm koj pawg 3 yuav yog ib kem ntawm cov ntsiab lus.
Siv Column-Width
Muaj lwm cov khoom ntxiv rau "kem-suav" uas koj tuaj yeem siv, thiab nyob ntawm seb koj qhov kev xav tau qhov twg, nws yuav yog qhov zoo rau koj qhov chaw. Qhov no yog "column-width". Siv cov cim HTML tib yam li yav tas los, peb yuav ua qhov no nrog peb CSS:
.content {-moz-column-width: 500px; -webkit-kem-dav: 500px; kem-dav: 500px; -moz-column-gap: 30px; -webkit-kem-kis: 30px; kem-kis: 30px; } .content div {zaub: inline-block; }Txoj kev uas qhov hauj lwm no yog qhov browser siv qhov "sab-dav" ua qhov siab tshaj plaws ntawm qhov kem ntawd. Li ntawd, yog tias qhov rais qhib qhov tsawg tshaj 500 tawm pixels, cov 3 kev cais yuav tshwm sim hauv ib kem, ib qho ntawm ib qho ntawm lwm qhov. Qhov no yog ib qho kev teeb tsa raug siv rau txawb / me me npo.
Raws li qhov browser dav yuav tsub kom loj txaus kom haum 2 kab nrog rau daim ntawv qhia txog kem khoob khawm, qhov browser yuav cia li tawm ntawm ib qho sab ntawv sau rau ob kab. Kom nce qhov dav dav dav thiab nws thiaj li, koj yuav tau txais 3 txoj kab tsim, nrog peb txhua zaus ntawm peb cov rooj sib tham tso tawm hauv lawv tus kheej. Ntxiv dua thiab, qhov no yog ib txoj hauv kev zoo kom tau txais qee cov lus teb, ntaus ntau tus phooj ywg , thiab koj tsis txawm siv los siv cov lus nug los hloov cov kev teeb tsa!
Lwm cov khoom ntim
Ntxiv rau cov khoom uas tau them rau ntawm no, nws tseem muaj cov khoom rau "kem-txoj cai", nrog rau xim, style, thiab dav qhov tseem ceeb uas tso cai rau koj tsim cov cai ntawm koj kab. Cov no yuav siv tsis txhob ciam teb rau lwm tus yog tias koj xav kom muaj qee cov kab cais koj cov kab.
Lub sij hawm rau sim
Tam sim no, CSS Ntau Sab Layout yog qhov zoo heev. Nrog prefixes, dua 94% ntawm cov neeg siv web yuav pom cov yeeb yaj kiab, thiab pawg ntseeg uas tsis tau yog tiag tiag yuav yog cov laus dua hauv Internet Explorer uas koj tsis tuaj yeem pab txhawb ntxiv lawm.
Nrog rau theem ntawm kev txhawb tam sim no nyob rau hauv qhov chaw, tsis muaj laj thawj tsis txhob pib xyaum ua nrog CSS Txhua thiab muab cov kev cai no rau hauv cov khoom siv npaj ntau lawm. Koj tuaj yeem pib koj cov kev sim uas siv cov HTML thiab CSS nyob rau hauv tsab xov xwm no thiab ua si nrog cov nqi sib txawv los saib dab tsi yuav ua hauj lwm zoo tshaj plaws rau koj qhov chaw qhov kev xav tau.