Lay-out met meerdere kolommen (gelijklopend met tijdschriften) met CSS3
Over het algemeen verliezen mensen het spoor bij het lezen van extreem lange inhoud. Daarom is de inhoud in gedrukte media zoals tijdschriften en kranten verdeeld in meerdere kolommen om ze gemakkelijk te kunnen lezen.
Het creëren van een kolom op het web is een heel ander verhaal. Het is best moeilijk. In feite, niet zo heel lang geleden, moet je de inhoud misschien handmatig in delen verdelen divs en zwaai deze naar rechts of links, en specificeer vervolgens de breedte, opvulling, marge, randen, enzovoort.
Maar de zaken zijn nu veel vereenvoudigd met de CSS3 Multi-kolommodule. Zoals de naam duidelijk aangeeft, kunnen we met deze module inhoud verdelen in de kolomlay-out die we in kranten of tijdschriften zien.
Browserondersteuning
Meerdere kolommen worden momenteel ondersteund in alle browsers - Firefox 2+, Chrome 4+, Safari 3.1+ en Opera 11.1 - behalve, zoals voorspeld, Internet Explorer, maar de volgende versie, IE10, lijkt begonnen te zijn met het ondersteunen van deze module.
Voor de rest van de browsers heeft Firefox het nog steeds nodig om te kunnen werken -moz- voorvoegsel, terwijl Chrome en Safari de -webkit- voorvoegsel. Opera vereist geen voorvoegsels, dus we kunnen gewoon de officiële eigenschappen gebruiken.
Bron: Wanneer kan ik CSS3 Multiple-kolomlay-out gebruiken?
Maak meerdere kolommen
Voordat we de kolommen maken, hebben we enkele tekstparagrafen voorbereid voor de demonstratie, verpakt in de HTML5 tag, als volgt;
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, sit amet aliquet justo bibendum non. Integer bibendum convallis sapien, sit amet tincidunt orci placerat in. Integer vitae consequat augue. //enzovoorts
... en geef de breedte op voor 600px van de stylesheet, dat is alles.
Laten we beginnen met het maken van de kolommen.
In het onderstaande voorbeeld zullen we de inhoud indelen twee kolommen met de column-count eigendom. Deze eigenschap vertelt de browser dat de inhoud in kolommen moet worden weergegeven op basis van het opgegeven nummer en dat de browser de juiste breedte voor elke kolom mag bepalen.
artikel -webkit-kolom-telling: 2; -moz-column-count: 2; column-count: 2;
Behalve dat ze door de telling worden gedefinieerd, kunnen kolommen worden gemaakt door de breedte op te geven met behulp van de kolombreedte property en verlaat de browser om te beslissen hoeveel kolommen op hun plaats moeten worden gegenereerd.
In dit voorbeeld specificeren we de kolombreedte voor 150px, wat resulteerde in de inhoud die in drie kolommen moest worden verdeeld.
artikel -moz-column-width: 150px; -webkit-kolombreedte: 150 px; kolombreedte: 150 px;
Zoals vermeld in de spec. de werkelijke breedte van de kolom kan breder of smaller zijn dan de opgegeven kolombreedte, afhankelijk van de beschikbare ruimte. Ook als de waarde voor de breedte niet expliciet is opgegeven, is de waarde “auto” wordt als standaard genomen, wat ook kan betekenen “geen kolom”.
Column Gap
Column Gap definieer de spaties die elke kolom scheiden. De gap-waarde kan worden vermeld in em of px, maar zoals vermeld in de spec de waarde kan niet negatief zijn. In het onderstaande voorbeeld specificeren we de kloof voor 30px, dus de ruimtes tussen de kolommen zien er iets breder uit.
artikel -webkit-column-gap: 30px; -moz-column-gap: 30px; kolomafstand: 30px;
Kolomregel
Als u randen tussen de kolom wilt toevoegen, kunt u de kolom-regel eigendom, dat erg lijkt op het grens eigendom. Laten we zeggen dat als we een gestippelde rand tussen de kolom willen plaatsen, we kunnen schrijven;
artikel -moz-column-rule: 1px dotted #ccc; -webkit-kolomregel: 1px gestippeld #ccc; kolomregel: 1px gestippeld #ccc;
Kolombereik
Deze eigenschap werkt vrijwel hetzelfde als de colspan in tafel label. De algemene implementatie van deze eigenschap is om de kop van de inhoud in alle kolommen te omspannen. Hier is een voorbeeld.
artikel h1 -webkit-column-span: all; kolom overspanningen: Alle;
In het bovenstaande voorbeeld hebben we de h1 om over alle kolommen te spreiden en als de kolomomvang is opgegeven, 1 zal als standaard worden genomen. Helaas werkt deze accommodatie op het moment van schrijven alleen in Opera en Chrome.
Laatste woorden
Dat is alles voor nu, we hebben alle essentiële dingen doorlopen om meerdere kolommen te maken met CSS3, en zoals we in het begin al noemden, deze module werkt heel goed in moderne browsers, maar deze werkt nog niet in Internet Explorer.
Uiteindelijk hopen we dat u nu een redelijk goed begrip hebt van het maken van kolommen met CSS3 en als u tijd heeft voor experimenten, kunt u uw methoden en resultaten delen in het vak hieronder. Bedankt voor het lezen van deze post en veel plezier.
- demonstratie
- Download de bron
