Bagaimana membuat: layout dua kolom

Bagaimana membuat layout dua kolom

Tahap pertama - Tambahkan HTML:

<div class="row">
  <div class="column"></div>
  <div class="column"></div>
</div>

Tahap kedua - Tambahkan CSS:

Dalam contoh ini, kita akan membuat dua kolomLebar yang samaKolom:

Contoh float

.column {
  float: left;
  width: 50%;
}
/* Menghapus float setelah kolom */
.row:after {
  content: "";
  display: table;
  clear: both;
}

Coba sendiri

Metode modern untuk membuat layout dua kolom adalah menggunakan CSS Flexbox. Namun, ia tidak mendukung Internet Explorer 10 dan versi yang lebih awal.

Contoh Flex

.row {
  display: flex;
}
.column {
  flex: 50%;
}

Coba sendiri

Anda dapat memilih menggunakan float atau flex untuk membuat layout dua kolom. Namun, jika Anda memerlukan dukungan untuk IE10 dan versi yang lebih kecil, gunakan float.

Petunjuk:Untuk mendapatkan informasi lebih lanjut tentang Flexible Box Layout Module, baca tutoriel kami Tutoriel CSS Flexbox。

Dalam contoh ini, kita akan membuat dua kolom yang lebar berbeda:

Contoh

.column {
  float: left;
}
.left {
  width: 25%;
}
.right {
  width: 75%;
}

Coba sendiri

Dalam contoh ini, kita akan membuatResponsiLayout dua kolom:

Contoh

/* Layout responsi - Saat lebar layar kurang dari 600px, dua kolom diatur berlapis, bukan berjejer */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Coba sendiri

Halaman terkait

Tutoriel:Tata letak situs web CSS

Tutoriel:CSS Responsi Web Design