Hoe je afbeeldingen naast elkaar uitlijnt

Ler hoe je afbeeldingen naast elkaar uitlijnt met CSS.

Hoe afbeeldingen naast elkaar te plaatsen

Stap 1 - Voeg HTML toe:

<div class="row">
  <div class="column">
    <img src="img_snow.jpg" alt="Snow" style="width:100%">
  </div>
  <div class="column">
    <img src="img_forest.jpg" alt="Forest" style="width:100%">
  </div>
  <div class="column">
    <img src="img_mountains.jpg" alt="Mountains" style="width:100%">
  </div>
</div>

Stap 2 - Voeg CSS toe:

Hoe CSS te gebruiken float Eigenschappen voor het maken van naast elkaar staande afbeeldingen:

Float voorbeeld

/* Drie afbeeldingscontainers (vier afbeeldingscontainers gebruiken 25%, twee afbeeldingscontainers gebruiken 50%, enz.) */
.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}
/* Wis de float achter het afbeeldingscontainer */
.row::after {
  content: "";
  clear: both;
  display: table;
}

Probeer het zelf

Hoe CSS te gebruiken flex Eigenschappen voor het maken van naast elkaar staande afbeeldingen:

Flexbox voorbeeld

.row {
  display: flex;
}
.column {
  flex: 33.33%;
  padding: 5px;
}

Probeer het zelf

Opmerking:Flexbox ondersteunt geen Internet Explorer 10 en eerder versies. Of je float of flex gebruikt om een driekolomig lay-out te maken, hangt af van jou. Maar als je IE10 en lager moet ondersteunen, moet je浮动 gebruiken.

Tip:Voor meer informatie over het module voor flexibele box lay-out, lees onze CSS Flexbox handleiding.

Voeg responsiviteit toe

Of, je kunt media queries toevoegen om afbeeldingen op een specifieke schermbreedte op elkaar te stapelen in plaats van naast elkaar.

Het volgende voorbeeld zal afbeeldingen horizontaal op elkaar stapelen op schermen met een breedte van 500px of kleiner:

Responsieve voorbeeld

/* Responsieve lay-out - zet drie kolommen op elkaar in plaats van naast elkaar */
@media screen and (max-width: 500px) {
  .column {
    width: 100%;
  }
}

Probeer het zelf

Voor meer informatie over media queries, lees onze CSS media query handleiding.

Gerelateerde pagina's

Handleiding:CSS afbeelding

Handleiding:CSS float

Handleiding:CSS afbeeldingsbibliotheek