Di bawah ini kita akan mempelajari cara menyelaraskan gambar sejajar yang berdampingan(Align Images Side By Side) dengan CSS.
Section Artikel
Align Images Side By Side
Contoh
<!DOCTYPE html> <html> <head> <style> * { box-sizing: border-box; } .column { float: left; width: 33.33%; padding: 5px; } /* Clearfix (clear floats) */ .row::after { content: ""; clear: both; display: table; } </style> </head> <body> <h2>Images Side by Side</h2> <p> Cara membuat gambar berdampingan dengan properti CSS float: </p> <div class="row"> <div class="column"> <img src="https://dosenit.com/wp-content/uploads/2021/01/oregairu.jpg" alt="Snow" style="width:100%"> </div> <div class="column"> <img src="https://dosenit.com/wp-content/uploads/2020/10/36f88c4d3791007c61af1a2132671d0f.jpg" alt="Forest" style="width:100%"> </div> <div class="column"> <img src="https://dosenit.com/wp-content/uploads/2021/01/oregairu2.jpg" alt="Mountains" style="width:100%"> </div> </div> </body> </html>
Cara Menempatkan Gambar Berdampingan(Align Images Side By Side)
Langkah 1) Tambahkan HTML:
Contoh
<div class="row">
<div class="column">
<img src="https://dosenit.com/wp-content/uploads/2021/01/oregairu.jpg" alt="Snow" style="width:100%">
</div>
<div class="column">
<img src="https://dosenit.com/wp-content/uploads/2020/10/36f88c4d3791007c61af1a2132671d0f.jpg" alt="Forest" style="width:100%">
</div>
<div class="column">
<img src="https://dosenit.com/wp-content/uploads/2021/01/oregairu2.jpg" alt="Mountains" style="width:100%">
</div>
</div>Langkah 2) Tambahkan CSS:
Kita dapat menggunakan CSS dengan 2 cara, yaitu menggunakan float dan flex. Berikut ini kode yang ditambahkan jika ingin menggunakan CSS float atau CSS flex :
1. Cara membuat Align Images Side By Side dengan properti CSS float:
/* Tiga container gambar (gunakan 25% untuk empat dan 50% untuk dua, dll) */
.column {
float: left;
width: 33.33%;
padding: 5px;
}
/* Hapus float setelah container gambar */
.row::after {
content: "";
clear: both;
display: table;
}2. Cara membuat Align Images Side By Side dengan properti CSS flex:
Contoh Flexbox
.row {
display: flex;
}
.column {
flex: 33.33%;
padding: 5px;
}Catatan: Flexbox tidak didukung di Internet Explorer 10 dan versi sebelumnya. Terserah jika ingin menggunakan float atau flex untuk membuat tata letak tiga kolom. Namun, jika membutuhkan dukungan untuk IE10 dan yang lebih lama, maka harus menggunakan float.
Tambahkan Responsiveness
Secara opsional, kita dapat menambahkan kueri media untuk membuat gambar menumpuk satu sama lain alih-alih mengambang berdampingan, pada lebar layar tertentu.
Contoh berikut akan menumpuk gambar secara vertikal pada layar dengan lebar 500px atau kurang:
Contoh Responsif
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.column {
float: left;
width: 33.33%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
/* Tata letak responsif - membuat ketiga kolom bertumpuk, bukan bersebelahan */
@media screen and (max-width: 500px) {
.column {
width: 100%;
}
}
</style>
</head>
<body>
<h2>Responsive "Side-by-Side" Images</h2>
<p> Cara membuat gambar berdampingan dengan properti float CSS. Pada layar dengan lebar 500 piksel atau kurang, gambar akan bertumpuk, bukan bersebelahan: </p>
<p> Ubah ukuran jendela browser untuk melihat efeknya. </p>
<div class="row">
<div class="column">
<img src="https://dosenit.com/wp-content/uploads/2021/01/oregairu.jpg" alt="Snow" style="width:100%">
</div>
<div class="column">
<img src="https://dosenit.com/wp-content/uploads/2020/10/36f88c4d3791007c61af1a2132671d0f.jpg" alt="Forest" style="width:100%">
</div>
<div class="column">
<img src="https://dosenit.com/wp-content/uploads/2021/01/oregairu2.jpg" alt="Mountains" style="width:100%">
</div>
</div>
</body>
</html>
