Wie man Bilder nebeneinander ausrichtet

Lernen Sie, wie man Bilder nebeneinander ausrichtet, indem Sie CSS verwenden.

Wie man Bilder nebeneinander platziert

Schritt 1 - Fügen Sie HTML hinzu:

<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>

Schritt 2 - Fügen Sie CSS hinzu:

Wie man CSS verwendet float Attribute zur Erstellung nebeneinander liegender Bilder:

Float-Beispiel

/* Drei Bildcontainer (vier Bildcontainer verwenden 25%, zwei Bildcontainer verwenden 50%, und so weiter) */
.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}
/* Entfernen Sie den Float nach dem Bildcontainer */
.row::after {
  content: "";
  clear: both;
  display: table;
}

Probieren Sie es selbst aus

Wie man CSS verwendet flex Attribute zur Erstellung nebeneinander liegender Bilder:

Flexbox-Beispiel

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

Probieren Sie es selbst aus

Achtung:Flexbox unterstützt Internet Explorer 10 und frühere Versionen nicht. Ob Sie float oder flex zur Erstellung einer dreispaltigen Anordnung verwenden möchten, hängt von Ihnen ab. Wenn Sie jedoch IE10 und frühere Versionen unterstützen müssen, sollten Sie Float verwenden.

Tipp:Für mehr Informationen über das Modul Flexbox lesen Sie bitte unsere CSS Flexbox-Tutorial.

Fügen Sie die Responsivität hinzu

Oder Sie können Medienabfragen hinzufügen, um die Bilder bei bestimmten Bildschirmbreiten zu stapeln, anstatt nebeneinander zu sein.

Das folgende Beispiel stapelt die Bilder vertikal auf Bildschirmen mit einer Breite von 500px oder weniger:

Responsives Beispiel

/* Responsives Layout - Die drei Spalten werden gestapelt anstatt nebeneinander zu sein */
@media screen and (max-width: 500px) {
  .column {
    width: 100%;
  }
}

Probieren Sie es selbst aus

Für mehr Informationen über Medienabfragen lesen Sie bitte unsere CSS-Medienabfrage-Tutorial.

Verwandte Seiten

Tutorials:CSS Bild

Tutorials:CSS-Fließtext

Tutorials:CSS Bildergalerie