Bagaimana untuk membuat: kolom tinggi sama

Belajar bagaimana untuk membuat kolom tinggi sama dengan CSS.

Bagaimana untuk membuat kolom tinggi sama

Ketika kolom Anda seharusnya ditampilkan secara bersamaan, Anda biasanya ingin mereka memiliki tinggi yang sama (sesuai tinggi yang paling tinggi).

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; /* Jadi elemen kontainer berperan seperti tabel */
  width: 100%; /* Dijadikan lebar penuh untuk memperluas seluruh halaman */
}
.col {
  display: table-cell; /* Jadi elemen dalam kontainer berperan seperti sel tabel */
}

Coba sendiri

Tinggi sama responsif

Kolom yang dibuat di contoh sebelumnya adalah responsif (jika Anda mengatur ukuran layar browser dalam contoh yang Anda coba, Anda akan melihat mereka mengatur otomatis 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 sebuah media query dan tentukan nilai piksel batas untuk ini:

Contoh

/* Jika lebar tinggi layar kurang dari 600px, maka kolom diatur untuk menggumpal */
@media only screen and (max-width: 600px) {
  .col {
    display: block;
    width: 100%;
  }
}

Coba sendiri

Mencapai tinggi dan lebar yang sama dengan 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.

Related Pages

Tutorial:CSS Flexbox