Hoe OM - Gemengde kolomuitleg
Leer hoe om 'n gemengde kolomuitlegrooster met CSS te skep.
Leer hoe om 'n responsiewe kolomuitleg te skep wat wissel tussen 4 kolomme, 2 kolomme en volwydte kolomme, afhangende van skermwydte.
Verander die grootte van die blaaiervenster om die responsiewe effek te sien:
Hoe om 'n gemengde kolomuitleg te skep
Stap 1) Voeg HTML by:
Voorbeeld
<div class="row">
<div class="column"></div>
<div
class="column"></div>
<div
class="column"></div>
<div
class="column"></div>
</div>
Stap 2) Voeg CSS by:
In hierdie voorbeeld sal ons 'n vier-kolom-uitleg skep wat sal transformeer na twee kolomme op skerms wat minder as 900px breed is. Op skerms wat minder as 600px wyd is, sal die kolomme egter bo-op mekaar stapel in plaas daarvan om langs mekaar te dryf.
Voorbeeld
/* Create four equal columns that floats next to each other */
.column {
float: left;
width: 25%;
}
/* Clear floats */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes a two column-layout
instead of four columns */
@media screen and (max-width: 900px) {
.column {
width: 50%;
}
}
/* Responsive layout - makes the two columns
stack on top of each other instead of next to each other */
@media
screen and (max-width: 600px) {
.column {
width: 100%;
}
}
Wenk: Gaan na ons CSS webwerf-uitleg- tutoriaal om meer te wete te kom oor webwerf-uitlegte.
Wenk: Gaan na ons CSS Responsive Web Design Tutoriaal om meer te wete te kom oor responsiewe webontwerp en roosters.