Miten luodaan: Horisontaaliskrolla oleva kuvakokoelma

Opi, miten CSS:llä luodaan horisontaaliskrolla oleva kuvakokoelma.

Luo horisontaaliskrolla oleva kuvakokoelma

Ensimmäinen vaihe - Lisää 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>

Toinen vaihe - Lisää CSS:

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

Kokeile itse

Tiedostot:

Oppitunti:HTML kuva

Oppitunti:CSS asettaa kuvan tyylit