Hoe OM - Side-by-side Tabelle
Leer hoe om tabelle langs mekaar met CSS te skep.
Hoe om tafels langs mekaar te plaas
Hoe om tabelle langs mekaar te skep met die CSS- float
eienskap:
Voorbeeld
* {
box-sizing: border-box;
}
/* Create a two-column
layout */
.column {
float: left;
width: 50%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
Hoe om tabelle langs mekaar te skep met die CSS- flex
eienskap:
Voorbeeld
* {
box-sizing: border-box;
}
.row {
display: flex;
}
.column {
flex: 50%;
padding: 5px;
}
Let wel: Flexbox word nie in Internet Explorer 10 en vroeër weergawes ondersteun nie. Dit is aan jou of jy floats of flex wil gebruik. As jy egter ondersteuning vir IE10 en af benodig, moet jy float gebruik.
Wenk: Lees ons CSS Flexbox-hoofstuk om meer te wete te kom oor die Flexible Box -uitlegmodule .
Voeg responsiwiteit by
Die voorbeeld hierbo sal nie goed lyk op 'n mobiele toestel nie, aangesien twee kolomme te veel spasie van die bladsy sal opneem. Om 'n responsiewe tabel te skep, wat van 'n tweekolom-uitleg na 'n volle breedte-uitleg op mobiele toestelle moet gaan, voeg die volgende medianavrae by:
Voorbeeld
/* Responsive layout - makes the two columns stack on top of each other
instead of next to each other on screens that are smaller than 600 px */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
Wenk: Gaan na ons CSS-tabelle-tutoriaal om meer te wete te kom oor hoe om tabelle te stileer.
Wenk: Gaan na ons CSS Float Tutoriaal om meer te wete te kom oor die float eiendom.
Wenk: Gaan na ons CSS Flexbox-tutoriaal om meer te wete te kom oor die flex-eienskap.