Bagaimana membuat: kolom yang tinggi sama

Belajar bagaimana membuat kolom yang tinggi sama menggunakan CSS.

Bagaimana membuat kolom yang tinggi sama

Ketika kolom Anda seharusnya ditampilkan berbaris, Anda biasanya ingin mereka memiliki tinggi yang sama (dengan tinggi yang tertinggi).

Coba sendiri

Langkah pertama - Tambahkan HTML:

<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 kedua - Tambahkan CSS:

.col-container {
  display: table; /* Jadikan elemen kontainer berperan seperti tabel */
  width: 100%; /* Dapat diatur lebar penuh untuk memperluas seluruh halaman */
}
.col {
  display: table-cell; /* Jadikan elemen dalam kontainer berperan seperti sel tabel */
}

Coba sendiri

Tinggi kotak yang responsif

Kolom yang dibuat di contoh sebelumnya adalah responsif (jika Anda mengatur ukuran jendela browser dalam contoh yang Anda coba, Anda akan melihat mereka otomatis menyesuaikan ke lebar dan tinggi yang diperlukan). Namun, untuk layar kecil (seperti ponsel), Anda mungkin ingin mereka berbaris vertikal daripada berbaris horizontal:

Untuk mencapai hal ini, tambahkan media query dan tentukan nilai piksel batas:

Contoh

/* Jika ukuran jendela browser kurang dari 600px, lakukan kolom untuk diatur berbaris */
@media only screen and (max-width: 600px) {
  .col {
    display: block;
    width: 100%;
  }
}

Coba sendiri

Mencapai tinggi dan lebar yang sama menggunakan Flexbox

Anda juga dapat menggunakan Flexbox untuk membuat kotak yang tinggi sama:

Contoh

.col-container {
  display: flex;
  width: 100%;
}
.col {
  flex: 1;
  padding: 16px;
}

Coba sendiri

Perhatian:Internet Explorer 10 dan versi sebelumnya tidak mendukung Flexbox.

Halaman yang berhubungan

Tutorial:CSS Flexbox