Flere kolonner Layout (Magazine-like) Med CSS3
Generelt vil folk miste spor når de leser ekstremt lang innhold. Det er derfor, i utskriftsmedier som blader og aviser, innholdet er delt inn i flere kolonner for enkel lesing.
Å lage en kolonne på nettet er en helt annen historie. Det er ganske vanskelig. Faktisk, ikke for lenge siden må du kanskje dele innholdet manuelt i noen divs og flyte den til høyre eller venstre, og spesifiser deretter bredden, polstringen, marginen, kantene og så videre.
Men ting er nå mye forenklet med CSS3 Multi Column Module. Som navnet tilsier tydeligvis, lar denne modulen oss dele opp innholdet i det kolonneformede layoutet vi ser i aviser eller blader.
Nettleserstøtte
Flere kolonner støttes for øyeblikket i alle nettlesere - Firefox 2+, Chrome 4+, Safari 3.1+ og Opera 11.1 - unntatt, som forutsatt, Internet Explorer, men den neste versjonen, IE10, synes å ha begynt å gi støtte til denne modulen.
For resten av nettleserne, for at Firefox skal fungere, trenger Firefox fortsatt -moz- prefiks, mens Chrome og Safari trenger -webkit- prefiks. Opera krever ingen prefikser, så vi kan bare bruke de offisielle egenskapene.
Kilde: Når kan jeg bruke CSS3 Multiple column layout?
Opprett flere kolonne
Før vi lager kolonnene, har vi utarbeidet noen tekstavsnitt for demonstrasjonen, pakket inn i HTML5 tag, som følger;
Kjæresten er dum og sitter, og er med på å hjelpe. Nunc libero magna, venenatis quis aliquet et, rutrum i augue. Donec vel tempor dolor. Donec volutpat fringilla porta. Suspendisse non null tortor. Quisque commodo ornare mi, sett deg bare på bibendum ikke. Integer bibendum convallis sapien, setter alt i orden eller er plassert i. Integer vite consequat augue. //og så videre
... og spesifiser bredden for 600px fra stilarket, det er det.
Nå, la oss begynne å lage kolonnene.
I eksemplet nedenfor deles innholdet inn i to kolonner med kolonne-count eiendom. Denne egenskapen vil fortelle nettleseren å gjengi innholdet i kolonner med det angitte nummeret og la nettleseren bestemme riktig bredde for hver kolonne.
artikkel -webkit-kolonne-telling: 2; -moz-kolonne-count: 2; kolonne-count: 2;
Bortsett fra å bli definert av tellingen, kan kolonner opprettes ved å spesifisere bredden ved hjelp av kolonnebredde eiendom og forlater nettleseren for å bestemme hvor mange kolonner som skal genereres på plass.
I dette eksemplet spesifiserer vi kolonnebredden for 150px, noe som resulterte i at innholdet ble delt inn i tre kolonner.
artikkel -moz-kolonne-bredde: 150px; -webkit-kolonne-bredde: 150px; kolonnebredde: 150px;
Som angitt i spesifikasjonen. kolonnenes faktiske bredde kan være bredere eller smalere enn den angitte kolonnebredden avhengig av ledig plass. Også, hvis breddeverdien ikke er spesifisert spesifikt, vil “auto” vil bli tatt som standard, som også kan bety “ingen kolonne”.
Kolonne Gap
Kolonne Gap definer mellomrom som skiller hver kolonne. Gapverdien kan oppgis i em eller px, men som angitt i spesifikasjonen verdien kan ikke være negativ. I eksemplet nedenfor spesifiserer vi gapet for 30px, så mellomrummet mellom kolonnene ser litt bredere ut.
artikkel -webkit-kolonneavstand: 30px; -moz-kolonne-gapet: 30px; kolonneavstand: 30px;
Kolonneregel
Skulle du legge til grenser mellom kolonnen, kan du bruke kolonne-regelen eiendom, som fungerer veldig lik den grense eiendom. Så, la oss si, hvis vi ønsker å sette en stiplet kant mellom kolonnen, kan vi skrive;
artikkel -moz-kolonne-regel: 1px prikket #ccc; -webkit-kolonne-regel: 1px prikket #ccc; kolonne-regel: 1px prikket #ccc;
Kolonne Span
Denne egenskapen fungerer ganske lik den colspan i bord stikkord. Den felles implementeringen av denne egenskapen er å spore innholdets overskrift på tvers av alle kolonnene. Her er et eksempel.
artikkel h1 -webkit-kolonne-span: alle; kolonne-span: det hele tatt;
I eksemplet ovenfor definerte vi h1 å spenne over alle kolonnene, og hvis kolonnespannen er spesifisert, 1 vil bli tatt som standard. Dessverre fungerer denne egenskapen på tidspunktet for denne skrivingen bare i Opera og Chrome.
Endelige ord
Det er alt for nå, vi har kommet gjennom alle viktige ting for å lage flere kolonner med CSS3, og som vi har nevnt i begynnelsen, fungerer denne modulen veldig bra i moderne nettlesere, men det virker ikke ennå i Internet Explorer.
Til slutt håper vi at du nå har en ganske god forståelse for hvordan du lager kolonner med CSS3, og hvis du har tid til eksperimenter, kan du dele metoder og resultater i kommentarfeltet nedenfor. Takk for at du leser dette innlegget og ha det gøy.
- Demo
- Last ned kilde
