Sådan oprettes: Billedgalleri med horisontal rullespalte

Lær, hvordan du bruger CSS til at oprette et billedgalleri med horisontal rullespalte.

Billedgalleri med horisontal rullespalte

Brug en horisontal rullespalte til at se andre billeder:

Wuhan Beijing Shenzhen Hangzhou Shanghi

Prøv det selv

Opret en billedgalleri med horisontal rullespalte

Trin 1 - Tilføj HTML:

<div class="scroll-container">
  <img src="img_5terre.jpg" alt="Cinque Terre">
  <img src="img_forest.jpg" alt="Forest">
  <img src="img_lights.jpg" alt="Northern Lights">
  <img src="img_mountains.jpg" alt="Mountains">
</div>

Trin 2 - Tilføj CSS:

div.scroll-container {
  background-color: #333;
  overflow: auto;
  white-space: nowrap;
  padding: 10px;
}
div.scroll-container img {
  padding: 10px;
}

Prøv det selv

Relaterede sider

Tutorial:HTML billede

Tutorial:CSS indstilling af billedstilar