CSS Multi-column Layout-modulet er et kraftfuldt værktøj, der lader dig nemt oprette multi-column layouts til dine websider. Fremkomsten af responsivt design betyder, at det er vigtigt at forstå, hvordan man bruger dette modul.
Du kan bruge kolonneegenskaber til at skabe fleksible og dynamiske layouts, der tilpasser sig forskellige skærmstørrelser.
Angivelse af kolonnenummer, bredde og mellemrum
For at skabe et passende layout med flere kolonner til dit sideindhold, bør du starte med at bestemme, hvor mange kolonner du vil have det til at spænde over. En af de vigtigste egenskaber i Multi-column-modulet er kolonneantal egenskab, som du bruger til at indstille antallet af kolonner til at opdele indholdet i.
For eksempel:
.beholder {
kolonneantal: 3;
}
Du kan også angive kolonnernes bredde og mellemrum. Du kan indstille kolonnebreddeværdien ved at bruge en hvilken som helst af de understøttede CSS-enheder synes godt om px, em, eller %.
Hvis søjlebredde er indstillet til auto, vil browseren beregne bredden af hver kolonne baseret på
kolonneantal ejendom og den tilgængelige plads inde i dit layout.For eksempel erklærer denne CSS 3 søjler, hver med en bredde på 200 pixels:
.beholder {
kolonneantal: 3;
søjlebredde: 200px;
}
Det søjle-gab egenskab angiver mellemrummet eller mellemrummet mellem kolonnerne i et multi-kolonne layout. Det vil indstille størrelsen på de tomme mellemrum mellem tilstødende kolonner og kan tage en længdeværdi i pixels, ems eller andre understøttede enheder.
For eksempel:
.beholder {
kolonneantal: 3;
søjle-gab: 20px; /* indstiller afstanden mellem kolonner til 20 pixels */
}
Som standard er værdien af søjle-gab er indstillet til normal. Din browser vælger denne værdi for at opnå ensartet mellemrum mellem kolonner i dit layout, mens den forbliver visuelt tiltalende. Denne værdi kan også variere mellem browsere og kan også afhænge af skriftstørrelse, linjehøjde, stilling ejendom, og andre layoutegenskaber for indholdet af kolonnerne.
Sørg for, at kolonner balancerer
CSS-kolonner forsøger at fylde al tilgængelig plads inde i et layout. Dette kan nogle gange resultere i kolonner, der har væsentligt forskellige højder, hvilket får layoutet til at se ujævnt ud.
For at balancere kolonner skal du sørge for, at hver kolonne i dit layout har omtrent samme mængde indhold.
Du kan opnå dette ved at indstille CSS kolonnefyld ejendom til balance. En browser vil så forsøge at fordele indholdet jævnt på tværs af alle kolonner, så de har nogenlunde samme højde.
Det kolonnefyld egenskab er indstillet til balance som standard, men en værdi på auto vil ændre denne adfærd. Brug af auto distribuerer indholdet på tværs af kolonner baseret på den tilgængelige plads. Dette kan resultere i ujævn afstand mellem søjler og ujævn søjlehøjde. Det kan endda producere et layout med tomme kolonner.
Her er et eksempel på, hvordan du bruger kolonnefyld egenskab til at balancere kolonner i et multi-kolonne layout:
.multi-column-layout {
kolonneantal: 3;
søjle-gab: 20px;
kolonnefyld: balance;
}
I dette eksempel har vi et multi-kolonne layout med tre kolonner og et mellemrum på 20 pixels mellem hver kolonne. Ved at indstille kolonnefyld ejendom til balance, sikrer vi, at indholdet fordeler sig jævnt på tværs af kolonnerne, hvilket resulterer i balancerede kolonnehøjder.
Det er vigtigt at bemærke, at kolonnefyld egenskaben fungerer muligvis ikke godt for alle layouts og kan resultere i ujævn afstand mellem kolonnerne. I sådanne tilfælde skal du muligvis bruge JavaScript til manuelt at balancere kolonnerne. Husk at følge bedste praksis og bruge progressiv forbedring så du ikke er afhængig af JavaScript.
Samler det hele
Du kan samle alt, hvad du har lært om implementering af et layout med CSS-kolonner og bruge det til at skabe et layout i magasinstil.
Først skal du oprette den grundlæggende HTML-struktur. Brug et containerelement til at ombryde dit indhold, og opret derefter flere underordnede elementer, som du derefter kan layoute i kolonner.
html>
<html>
<hoved>
<linkrel="stylesheet"href="CSScolumns.css" />
hoved>
<legeme>
Beholderelement
<divklasse="magasin-layout">Barneelementer
<divklasse="artikel">
<h2>Artikeltitelh2><s>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ind
magna vel lorem pharetra bibendum.s>
div><divklasse="artikel">
<h2>Artikeltitelh2><s>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ind
magna vel lorem pharetra bibendum.s>
div><divklasse="artikel">
<h2>Artikeltitelh2><s>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ind
magna vel lorem pharetra bibendum.s>
div>
div>
legeme>
html>
For at skabe et layout i magasinstil ved hjælp af CSS Multi-column-modulet skal du kombinere kolonneantal, søjlebredde, søjle-gab, og kolonnefyld ejendomme:
.magasin-layout {
kolonneantal: 3;
søjlebredde: 300px;
søjle-gab: 20px;
kolonnefyld: balance;
}
.artikel {
baggrundsfarve: #f8f8f8;
grænse-radius: 4px;
kasse-skygge: 0 2px 4pxrgba(0, 0, 0, 0.1);
polstring: 10px;
indbrud: undgå-kolonne;
}
Dette eksempel definerer også indbrud ejendom på .artikel klasse, med en værdi på undgå-kolonne. Egenskaben sikrer, at hver artikel forbliver inden for en enkelt kolonne i stedet for at opdeles på tværs af flere kolonner. Sådan skal layoutet se ud:
Brug af Fallbacks til ikke-understøttede browsere
Det er vigtigt at bemærke, at kolonneantal egenskaben understøttes ikke i alle browsere. Browsere, der ikke understøtter kolonneantal, vil i stedet vise indholdet i en enkelt kolonne.
For at levere reservestile til ikke-understøttede browsere kan du bruge funktionsforespørgsler som f.eks @bakker op at opdage støtte til kolonneantal ejendom og levere alternative stilarter, når egenskaben ikke understøttes.
For eksempel:
.beholder {
/* Fallback for browsere, der ikke understøtter kolonneoptælling */
bredde: 100%;
}
/* Find understøttelse af kolonneantal */
@bakker op (kolonneantal:3) {
.beholder {
kolonneantal: 3;
}
}
I dette eksempel bruger vi @bakker op funktionsforespørgsel for at finde understøttelse af kolonneantal ejendom. Hvis browseren understøtter kolonnetælling, beholder element vises i tre kolonner. Hvis browseren ikke understøtter kolonneoptælling, vil den vise indholdet i en enkelt kolonne ved hjælp af bredde ejendom.
Opdeling af indhold i kolonner
Samlet set giver CSS-kolonner en praktisk og kraftfuld måde at skabe fleksible og responsive layouts med flere kolonner, der forbedrer brugervenligheden og brugeroplevelsen af webindhold.
Ved at bruge CSS-kolonner og JavaScript sammen kan du skabe endnu mere sofistikerede og dynamiske layouts, der tilpasser sig til forskellige brugerpræferencer og enhedsstørrelser, hvilket gør dit webindhold mere tilgængeligt og engagerende for dine brugere.