How TO - Lay-out met twee kolommen
Leer hoe u een lay-outraster met 2 kolommen maakt met CSS.
Kolom 1
wat tekst..
Kolom 2
wat tekst..
Een lay-out met twee kolommen maken
Stap 1) HTML toevoegen:
Voorbeeld
<div class="row">
<div class="column"></div>
<div
class="column"></div>
</div>
Stap 2) CSS toevoegen:
In dit voorbeeld maken we twee gelijke kolommen:
Zwevend voorbeeld
.column {
float: left;
width: 50%;
}
/* Clear floats after the
columns */
.row:after {
content: "";
display: table;
clear: both;
}
Een moderne manier om twee kolommen te maken, is door CSS Flexbox te gebruiken . Het wordt echter niet ondersteund in Internet Explorer 10 en eerdere versies.
Flex Voorbeeld
.row {
display: flex;
}
.column {
flex: 50%;
}
Het is aan jou of je floats of flex wilt gebruiken om een lay-out met twee kolommen te maken. Als u echter ondersteuning nodig heeft voor IE10 en lager, moet u float gebruiken.
Tip: Lees ons CSS Flexbox-hoofdstuk voor meer informatie over de Flexible Box Layout Module .
In dit voorbeeld maken we twee ongelijke kolommen:
Voorbeeld
.column {
float: left;
}
.left {
width: 25%;
}
.right {
width: 75%;
}
In dit voorbeeld maken we een responsieve lay-out met twee kolommen:
Voorbeeld
/* Responsive layout - when the screen is less than 600px wide, make the two
columns stack on top of each other instead of next to each other */
@media
screen and (max-width: 600px) {
.column {
width: 100%;
}
}
Tip: Ga naar onze CSS Website Layout Tutorial voor meer informatie over website layouts.
Tip: ga naar onze CSS Responsive Web Design Tutorial voor meer informatie over responsive webdesign en rasters.