Multipla kolumner Layout (Magazine-liknande) Med CSS3 / Webbdesign

I allmänhet kommer människor att förlora spår när de läser extremt långt innehåll. Det är därför, i utskriftsmedier som tidningar och tidningar, är innehållet uppdelat i flera kolumner för enkel läsning.

Att skapa en kolumn på webben är en helt annan historia. Det är ganska svårt. Faktum är att du inte kan dela innehållet manuellt i någon del för länge sedan divs och flyta den till höger eller vänster, ange sedan bredd, vaddering, marginal, gränser och så vidare.

Men sakerna är nu mycket förenklade med CSS3 Multi Column Module. Som namnet tydligt innebär, tillåter den här modulen att dela innehållet i den kolonnerade layouten vi ser i tidningar eller tidskrifter.

Webbläsarsupport

Flera kolumner stöds för närvarande i alla webbläsare - Firefox 2+, Chrome 4+, Safari 3.1+ och Opera 11.1 - förutom, som förutspådd, Internet Explorer, men nästa version, IE10, verkar ha börjat ge stöd för denna modul.

För resten av webbläsare, för att det ska fungera behöver Firefox fortfarande -moz- prefix, medan Chrome och Safari behöver -webkit- prefix. Opera kräver inga prefix, så vi kan bara använda de officiella egenskaperna.

Skapa flera kolumner

Innan vi skapar kolumnerna har vi förberett några textparagraf för demonstrationen, insvept i HTML5

taggen, som följer;

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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, sätta dig bara i bibendum non. Integer bibendum convallis sapien, sitta i en eller flera ställen i. Integer vitae följt ögue. //och så vidare

... och ange bredden för 600px från stilarket, det är det.

Nu börjar vi skapa kolumnerna.

I exemplet nedan delar vi in innehållet i två kolumner med kolonn-count fast egendom. Denna egenskap kommer att berätta för webbläsaren att göra innehållet i kolumner med det angivna numret och låt webbläsaren bestämma rätt bredd för varje kolumn.

 artikel -webkit-kolumnräkning: 2; -moz-kolonn-count: 2; kolonn-count: 2;

Förutom att definieras av räkningen kan kolumner skapas genom att ange bredden med hjälp av kolumnbredd egendom och lämnar webbläsaren för att bestämma hur många kolumner som ska genereras på plats.

I det här exemplet anger vi kolumnbredden för 150px, vilket resulterade i att innehållet delades in i tre kolumner.

 artikel -moz-kolumnbredd: 150px; -webkit-kolumn-bredd: 150px; kolumnbredd: 150px;

Som anges i specifikationen kolonnens faktiska bredd kan vara bredare eller smalare än den angivna kolonnbredden beroende på ledigt utrymme. Om breddvärdet inte är explicit angivet, ska också “bil” kommer att tas som standard, vilket också kan betyda “ingen kolumn”.

Kolumn Gap

Kolumn Gap definiera mellanslag som skiljer varje kolumn. Klyftans värde kan anges i em eller px, men som anges i specifikationen värdet kan inte vara negativt. I exemplet nedan specificerar vi klyftan för 30px, så mellanrummen mellan kolumnerna ser lite bredare ut.

 artikel -webkit-kolumnavstånd: 30px; -moz-kolonn-gapet: 30px; kolumnavstånd: 30px;

Kolumnregeln

Om du vill lägga till gränser mellan kolumnen kan du använda kolonn-regel egendom, som fungerar väldigt lik den gräns fast egendom. Så, låt oss säga, om vi vill sätta en prickad kant mellan kolumnen, kan vi skriva;

 artikel -moz-kolumn-regel: 1px prickad #ccc; -webkit-kolumn-regel: 1px prickad #ccc; kolumnregeln: 1px prickad #ccc;

Kolumn span

Denna fastighet fungerar ganska lik den colspan i tabell märka. Det gemensamma genomförandet av den här egenskapen är att spänna innehållets rubrik över alla kolumner. Här är ett exempel.

 artikel h1 -webkit-column-span: all; kolonn-span: alla;

I exemplet ovan definierade vi h1 att spänna över alla kolumner, och om kolonnsträckan är specificerad, 1 kommer att tas som standard. Tyvärr går den här egenskapen, vid tidpunkten för det här skrivandet, bara i Opera och Chrome.

Slutord

Det är allt för nu har vi kommit igenom alla väsentliga saker för att skapa flera kolumner med CSS3, och som vi har nämnt i början fungerar den här modulen mycket bra i moderna webbläsare, men det fungerar inte ännu i Internet Explorer.

I slutändan hoppas vi att du nu har en ganska bra förståelse för hur du skapar kolumner med CSS3, och om du har tid för experiment, var god och dela med dig av dina metoder och resultat i kommentarfältet nedan. Tack för att du läste det här inlägget och ha det kul.

demo
Hämta källa