Cara - Sama Tingginya
Pelajari cara membuat kolom dengan tinggi yang sama dengan CSS.
Cara Membuat Kolom Tinggi Sama
Bila Anda memiliki kolom yang akan muncul berdampingan, Anda akan sering menginginkan kolom tersebut memiliki tinggi yang sama (cocok dengan tinggi yang tertinggi).
Masalah:
Keinginan:
Langkah 1) Tambahkan HTML:
Contoh
<div class="col-container">
<div class="col">
<h2>Column 1</h2>
<p>Hello World</p>
</div>
<div class="col">
<h2>Column 2</h2>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
</div>
<div class="col">
<h2>Column 3</h2>
<p>Some other text..</p>
<p>Some other text..</p>
</div>
</div>
Langkah 2) Tambahkan CSS:
Contoh
.col-container {
display: table; /* Make the
container element behave like a table */
width: 100%; /*
Set full-width to expand the whole page */
}
.col {
display: table-cell; /* Make elements inside the container behave like table
cells */
}
Tinggi Sama Responsif
Kolom yang kami buat pada contoh sebelumnya responsif (jika Anda mengubah ukuran jendela browser dalam contoh try it, Anda akan melihat bahwa mereka secara otomatis menyesuaikan dengan lebar dan tinggi yang diperlukan). Namun, untuk layar kecil (seperti ponsel cerdas), Anda mungkin ingin mereka menumpuk secara vertikal, bukan horizontal:
Pada layar sedang dan besar:
Halo Dunia.
Halo Dunia.
Halo Dunia.
Halo Dunia.
Halo Dunia.
Di layar kecil:
Halo Dunia.
Halo Dunia.
Halo Dunia.
Halo Dunia.
Halo Dunia.
Untuk mencapainya, tambahkan kueri media dan tentukan nilai piksel titik henti sementara kapan ini harus terjadi:
Contoh
/* If the browser window is smaller than 600px, make the columns stack on top
of each other */
@media only screen and (max-width: 600px) {
.col {
display: block;
width: 100%;
}
}
Sama Tinggi dan Lebar menggunakan Flexbox
Anda juga dapat menggunakan Flexbox untuk membuat kotak dengan ketinggian yang sama:
Contoh
.col-container {
display: flex;
width: 100%;
}
.col {
flex: 1;
padding: 16px;
}
Catatan: Flexbox tidak didukung di Internet Explorer 10 dan versi yang lebih lama.
Tip: Baca lebih lanjut tentang kotak fleksibel di Tutorial CSS Flexbox kami .