Flere kolonner Layout (Magazine-like) Med CSS3 / Webdesign

Generelt vil folk miste spor, når de læser ekstremt langt indhold. Derfor er indholdet i pressemedier som blade og aviser opdelt i flere kolonner for nem læsning.

Oprettelse af en kolonne på nettet er en helt anden historie. Det er ret svært. Faktisk, ikke for længe siden kan du muligvis opdele indholdet manuelt til nogle divs og flyd det til højre eller venstre, og angiv derefter bredden, polstring, margen, grænser og så videre.

Men tingene er nu meget forenklede med CSS3 Multi Column Module. Som navnet tydeligt antyder, giver dette modul os mulighed for at opdele indhold i det kolonneformede layout, vi ser i aviser eller blade.

Browser Support

Flere kolonner understøttes i øjeblikket i alle browsere - Firefox 2+, Chrome 4+, Safari 3.1+ og Opera 11.1 - bortset fra, som forudsagt, Internet Explorer, men den næste version, IE10, synes at være begyndt at understøtte denne modul.

For resten af browserne, for at det skal fungere, har Firefox stadig brug for -Moz- præfiks, mens Chrome og Safari har brug for -webKit- præfiks. Opera kræver ikke nogen præfikser, så vi kan bare bruge de officielle ejendomme.

Opret flere kolonner

Før vi opretter kolonnerne, har vi udarbejdet nogle tekstafsnit til demonstrationen, pakket ind i HTML5

tag som følger

  Det er et godt sted at være med, og det er vigtigt for dig. Nunc libero magna, venenatis quis aliquet et, rutrum in augue. Donec vel tempor dolor. Donec volutpat fringilla porta. Suspendisse non nulla tortor. Quisque commodo ornare mi, er kun et spørgsmål om bibendum non. Integer bibendum convallis sapien, er placeret i et eller andet sted. Integer er en følge heraf. //og så videre

... og angiv bredden for 600px fra stilarket, det er det.

Lad os nu begynde at lave kolonnerne.

I eksemplet nedenfor deler vi indholdet ind i to søjler med kolonne-count ejendom. Denne egenskab fortæller browseren at gøre indholdet i kolonner med det angivne nummer, og lad browseren bestemme den korrekte bredde for hver kolonne.

 artikel -webkit-kolonneantal: 2; moz-søjle-tæller: 2; kolonne-tæller: 2;

Udover at blive defineret af tællingen, kan der oprettes kolonner ved at angive bredden ved hjælp af kolonne bredde ejendom og forlader browseren for at bestemme, hvor mange kolonner der skal genereres på plads.

I dette eksempel specificerer vi kolonnebredden for 150 pixel, hvilket resulterede i, at indholdet blev opdelt i tre kolonner.

 artikel -moz-kolonne-bredde: 150px; -webkit-kolonne-bredde: 150px; kolonnebredde: 150px;

Som angivet i spec. kolonneens faktiske bredde kan være bredere eller smalere end den angivne kolonnebredde afhængigt af ledig plads. Også, hvis breddeværdien ikke er udtrykkeligt specificeret, vil “auto” vil blive taget som standard, hvilket også kunne betyde “ingen kolonne”.

Kolonne Gap

Kolonne Gap definer de mellemrum, der adskiller hver kolonne. Gabetværdien kan angives i em eller px, men som angivet i spec værdien kan ikke være negativ. I eksemplet nedenfor angives afstanden for 30px, så mellemrummet mellem kolonnerne ser lidt bredere ud.

 artikel -webkit-kolonne-mellemrum: 30px; -moz-kolonne-mellemrum: 30px; kolonne-gap: 30px;

Kolonne regel

Skulle du gerne tilføje grænser mellem kolonnen, kan du bruge kolonne-reglen ejendom, som virker meget lig den grænse ejendom. Så lad os sige, at hvis vi ønsker at sætte en stiplet grænse mellem søjlen, kan vi skrive;

 artikel -moz-kolonne-regel: 1px punkteret #ccc; -webkit-kolonne-regel: 1px punkteret #ccc; kolonne-regel: 1px prikket #ccc;

Kolonne Span

Denne ejendom fungerer meget ligner den colspan i bord tag. Den fælles implementering af denne ejendom er at spænde indholdets overskrift på tværs af alle kolonner. Her er et eksempel.

 artikel h1 -webkit-kolonne-span: alle; kolonne-span: alle;

I eksemplet ovenfor definerede vi h1 at spænde over alle kolonner, og hvis kolonnespændet er angivet, 1 vil blive taget som standard. Desværre fungerer denne ejendom på tidspunktet for denne skrivning kun i Opera og Chrome.

Endelige Ord

Det er alt for nu, vi har gennemgået alle de vigtige ting for at oprette flere kolonner med CSS3, og som vi har nævnt i starten fungerer dette modul meget godt i moderne browsere, men det virker ikke endnu i Internet Explorer.

I sidste ende håber vi, at du nu har en ret god forståelse for, hvordan du opretter kolonner med CSS3, og hvis du har tid til eksperimenter, er du velkommen til at dele dine metoder og resultater i kommentarfeltet nedenfor. Tak fordi du læser dette indlæg og har det sjovt.

Demo
Download kilde