Bagaimana untuk membuat: tata letak kolom campuran

Belajar bagaimana untuk menggunakan CSS untuk membuat grid tata letak kolom campuran.

Belajar bagaimana untuk membuat tata letak kolom ber respons, yang dapat berubah di antara empat baris, dua baris dan baris penuh lebar.

Tolong ubah saiz tetingkap pelayar untuk melihat kesan ber响应:

Cuba sendiri

Bagaimana untuk membuat tata letak kolom campuran

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, kami akan membuat tata letak empat baris, yang akan berubah menjadi dua baris pada layar dengan lebar kurang dari 900 paksi. Tetapi, pada layar dengan lebar kurang dari 600 paksi, baris akan menumpuk, bukannya bersamaan.

/* Membuat empat baris yang sama lebar, supaya mereka mengambang bersamaan */
.column {
  float: left;
  width: 25%;
}
/* Menghapus gelombang */
.row:after {
  content: "";
  display: table;
   clear: both;
}
/* Layout ber响应 – Mengubah tata letak menjadi dua baris daripada empat baris */
@media screen and (max-width: 900px) {
  .column {
    width: 50%;
  }
}
/* Layout ber响应 – Membuat dua baris menumpuk, bukannya bersamaan */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Cuba sendiri

相关页面

教程：CSS 网站布局

教程：CSS 响应式网页设计