Hur man justerar bilder sida vid sida

Lär dig hur du kan sida vid sida justera bilder med CSS.

Hur man lägger ut bilder bredvid varandra

Steg 1 - Lägg till HTML:

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

Steg 2 - Lägg till CSS:

Hur man använder CSS float Egenskaper för att skapa horisontella bilder:

Flödesexempel

/* Tre bildcontainers (fem bildcontainers använder 25%, två bildcontainers använder 50%, och så vidare) */
.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}
/* Rensa flödet efter bildcontainer */
.row::after {
  content: "";
  clear: both;
  display: table;
}

Prova själv

Hur man använder CSS flex Egenskaper för att skapa horisontella bilder:

Flexbox-exempel

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

Prova själv

Observera:Flexbox stöder inte Internet Explorer 10 och äldre versioner. Om du vill skapa en layout med tre kolumner med float eller flex beror det på dig själv. Men om du behöver stödja IE10 och äldre versioner, bör du använda float.

Tips:För mer information om modulen för flexibel layout, läs vår CSS Flexbox tutorial.

Lägg till responsivitet

Eller, du kan lägga till en media query för att stapla bilderna på specifika skärmbredder istället för att placera dem bredvid varandra.

Nedanstående exempel staplar bilderna vertikalt på skärmar med en bredd på 500px eller mindre:

Responsivt exempel

/* Responsiv layout - gör tre kolumner staplade istället för breda */
@media screen and (max-width: 500px) {
  .column {
    width: 100%;
  }
}

Prova själv

För mer information om media query, läs vår CSS media query tutorial.

Relaterade sidor

Tutorials:CSS Bild

Tutorials:CSS flyt

Tutorials:CSS Bildbibliotek