Bagaimana untuk mengatur gambar bersamaan

Belajar cara mengatur gambar bersamaan menggunakan CSS.

Bagaimana untuk menempatkan imej bersambung

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

Langkah Kedua - Tambahkan CSS:

Bagaimana untuk menggunakan CSS Floating Ciri untuk mencipta imej bersambung:

Contoh Floating

/* tiga wadah imej (empat wadah imej menggunakan 25%, dua wadah imej menggunakan 50%, dan seterusnya) */
.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}
/* membersihkan floating di belakang wadah imej */
.row::after {
  content: "";
  clear: both;
  display: table;
}

Coba Sendiri

Bagaimana untuk menggunakan CSS flex Ciri untuk mencipta imej bersambung:

Contoh Flexbox

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

Coba Sendiri

Perhatian:Flexbox tidak mendukung Internet Explorer 10 dan sebelumnya. Apa yang hendak anda gunakan untuk float atau flex untuk membuat tiga baris penataan tergantung kepada anda sendiri. Tetapi, jika anda memerlukan dukungan IE10 dan yang lebih rendah, anda seharusnya menggunakan float.

Petunjuk:Untuk mendapatkan informasi lebih lanjut tentang modul layout yang fleksibel, baca Panduan CSS Flexbox.

Tambahkan Kepantaran

Atau, anda boleh menambahkan media query untuk menghimpun imej pada lebar skrin tertentu daripada bersambung.

Contoh berikut akan menghimpun imej secara vertikal pada skrin lebar 500px atau kurang:

Contoh Ber Respons

/* Layout ber respons - Jaga tiga baris untuk ditarik daripada bersambung */
@media screen and (max-width: 500px) {
  .column {
    width: 100%;
  }
}

Coba Sendiri

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

Halaman Berhubungan

Panduan:CSS Gambar

Panduan:CSS Floating

Panduan:Pustaka Gambar CSS