Hoe te maken: Tweekoloms lay-out

Hoe een tweekoloms lay-out te maken

Stap 1 - Voeg HTML toe:

<div class="row">
  <div class="column"></div>
  <div class="column"></div>
</div>

Stap 2 - Voeg CSS toe:

In dit voorbeeld zullen we twee gelijke kolommen creëren:Gelijk breedkolommen:

Float voorbeeld

.column {
  float: left;
  width: 50%;
}
/* Wis de float achter de kolommen */
.row:after {
  content: "";
  display: table;
  clear: both;
}

Probeer het zelf

Een moderne manier om een tweekoloms lay-out te maken is door CSS Flexbox te gebruiken. Maar het ondersteunt geen Internet Explorer 10 en oudere versies.

Flex voorbeeld

.row {
  display: flex;
}
.column {
  flex: 50%;
}

Probeer het zelf

Je kunt kiezen om float of flex te gebruiken om een tweekoloms lay-out te maken. Maar als je IE10 en oudere versies moet ondersteunen, moet je float gebruiken.

Tip:Voor meer informatie over het Flexible Box Layout Module, lees onze CSS Flexbox handleiding.

In dit voorbeeld zullen we twee ongelijke kolommen creëren:

Voorbeeld

.column {
  float: left;
}
.left {
  width: 25%;
}
.right {
  width: 75%;
}

Probeer het zelf

In dit voorbeeld zullen we eenResponsiefTwee kolommen lay-out:

Voorbeeld

/* Responsieve lay-out - als de schermbreedte kleiner is dan 600px, zet de twee kolommen naast elkaar in plaats van naast elkaar */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Probeer het zelf

Gerelateerde pagina's

Handleiding:CSS website layout

Handleiding:CSS responsieve webontwerp