Sådan justerer du billeder parallelt

forrige side skift baggrund ved rulning
næste side runde billeder

Lær hvordan du kan justere billeder parallelt med CSS.

Parallelt stående billedgalleri

prøv det selv

Hvordan man placerer billeder parallelt

Første trin - tilføj 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>

Andet trin - tilføj CSS:

Hvordan man bruger CSS float Egenskaber til at oprette parallele billeder:

Float eksempel

/* Tre billedcontainere (fire billedcontainere bruger 25%, to billedcontainere bruger 50%, osv.) */
.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}
/* Ryd efter float i billedcontaineren */
.row::after {
  content: "";
  clear: both;
  display: table;
}

prøv det selv

Hvordan man bruger CSS flex Egenskaber til at oprette parallele billeder:

Flexbox eksempel

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

prøv det selv

Bemærk:Flexbox understøtter ikke Internet Explorer 10 og tidligere versioner. Om du skal bruge float eller flex til at oprette et tredobbelt kolonnearrangement afhænger af dig selv. Men hvis du har brug for at støtte IE10 og ældre versioner, bør du bruge float.

Tip:For at få mere information om flexbox layoutmodulen, læs vores CSS Flexbox tutorial。

Tilføj responsivitet

Eller, du kan tilføje en medieforespørgsel, så billederne stå lodret på en bestemt skærmbredde i stedet for at stå ved siden af hinanden.

Følgende eksempel vil vise billeder lodret stående på skærme med en bredde på 500px eller mindre:

Responsiv eksempel

/* Responsiv layout - gør tre kolonner til at stå lodret i stedet for at stå ved siden af hinanden */
@media screen and (max-width: 500px) {
  .column {
    width: 100%;
  }
}

prøv det selv

For at få mere information om medieforespørgsler, læs vores CSS medieforespørgsel tutorial。