Bagaimana mengatur gambar paralel

Belajar cara mengatur gambar paralel menggunakan CSS.

Bagaimana Menempatkan Gambar Berurut

Tahap Pertama - Tambahkan 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>

Tahap Kedua - Tambahkan CSS:

Bagaimana Menggunakan CSS Floating Atribut untuk membuat gambar berurut:

Contoh Floating

/* Tiga kontainer gambar (empat kontainer gambar menggunakan 25%, dua kontainer gambar menggunakan 50%, dan seterusnya) */
.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}
/* Menghapus floating setelah kontainer gambar */
.row::after {
  content: "";
  clear: both;
  display: table;
}

Coba Sendiri

Bagaimana Menggunakan CSS flex Atribut untuk membuat gambar berurut:

Contoh Flexbox

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

Coba Sendiri

Perhatian:Flexbox tidak mendukung Internet Explorer 10 dan versi sebelumnya. Apa yang Anda pilih untuk membuat tiga kolom berurut adalah float atau flex, tergantung keputusan Anda sendiri. Namun, jika Anda memerlukan dukungan untuk IE10 dan versi yang lebih rendah, Anda harus menggunakan floating.

Tip:Untuk informasi lebih lanjut tentang modul layout fleksibel, baca Tutorial CSS Flexbox.

Menambahkan Kekuatan Respon

atau, Anda dapat menambahkan media query untuk membuat gambar berlapis di lebar layar khusus, bukannya berurut.

Contoh berikut ini akan menempatkan gambar secara vertikal berlapis di layar yang lebar 500px atau lebih kecil:

Contoh Respon

/* Layout Respon - Membuat tiga kolom berlapis daripada berurut */
@media screen and (max-width: 500px) {
  .column {
    width: 100%;
  }
}

Coba Sendiri

Untuk informasi lebih lanjut tentang media query, baca Tutorial CSS Media Query.

Halaman Terkait

Tutorial:CSS Gambar

Tutorial:CSS Floating

Tutorial:Bibliotheka Gambar CSS