Bagaimana untuk membuat: Pustaka imej yang dapat digilirkan secara horizontal

Belajar bagaimana untuk membuat pustaka imej dengan baris gilirkan horizontal menggunakan CSS.

Pustaka imej dengan baris gilirkan horizontal

Gunakan baris gilirkan horizontal untuk melihat imej lain:

武汉 北京 深圳 杭州 上海

Cuba sendiri

Buat pustaka imej dengan baris gilirkan horizontal

Langkah pertama - Tambahkan 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>

Langkah kedua - Tambahkan CSS:

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

Cuba sendiri

Laman yang berkenaan

Panduan:Gambar HTML

Panduan:Tetapan CSS untuk gaya imej