Bagaimana membuat: tata letak empat kolom

Bagaimana membuat tata letak empat kolom

Langkah pertama - Tambahkan HTML:

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

Langkah kedua - Tambahkan CSS:

Dalam contoh ini, kita akan membuat tata letak empat kolom:

Contoh

.column {
  float: left;
  width: 25%;
}
/* Menghapus penjalar di belakang kolom */
.row:after {
  content: "";
  display: table;
  clear: both;
}

Coba sendiri

Dalam contoh ini, kita akan membuatResponsifTata letak empat kolom:

Contoh

/* Bentuk responsif - ketika lebar layar kurang dari 600px, tiga kolom akan berbaris, bukan berjejer */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Coba sendiri

Halaman yang berhubungan

Panduan:Rancangan situs web CSS

Panduan:Rancangan situs web responsif CSS