Bagaimanakah Saya Boleh Membuat Limpahan Kandungan Melebihi Lebar Bekas dalam CSS?

Memperluas Kandungan Melebihi Lebar Bekas dalam CSS

Apabila bekerja dengan grid responsif, selalunya perlu mempunyai div mengandungi yang mengembang kepada lebar tertentu. Walau bagaimanapun, dalam situasi tertentu, anda mungkin mahu melimpahi kandungan melebihi lebar bekas.

Pertimbangkan contoh CSS berikut:

.container {
  margin-left: auto;
  margin-right: auto;
  max-width: 1280px;
  padding: 0 30px;
  width: 100%;
}

Bekas ini mengembang kepada lebar maksimum 1280px dan menambah pelapik di sisi kiri dan kanannya. Secara lalai, kandungan dalam bekas ini akan membalut dalam lebar yang ditentukan.

Untuk membenarkan kandungan melimpah melebihi lebar bekas, anda mempunyai dua pilihan:

1. Gunakan Div Tambahan

Penyelesaian paling mudah ialah menutup bekas awal dan membuka div baharu yang memanjang ke lebar penuh skrin. Anda kemudiannya boleh menggunakan warna latar belakang atau imej yang anda inginkan pada div lebar penuh ini.

2. Keluarkan Bekas

Dalam sesetengah kes, anda mungkin tidak memerlukan div yang mengandungi sama sekali. Hanya keluarkan bekas dan benarkan div lebar penuh mengisi ruang yang ada. Pendekatan ini berfungsi dengan baik apabila anda hanya perlu mencapai latar belakang lebar penuh tanpa sebarang kandungan tambahan di luar lebarnya.

Kod Contoh:

<div class="container">
  <header></header>
</div>
<div class="fullwidth">
  <div class="container">
    <div class="mydiv">
      <p>Content</p>
    </div>
  </div>
</div>
<div class="container">
  <footer></footer>
</div>

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.container {
  max-width: 80%;
  border: 1px solid red;
  margin: 0 auto;
}
.fullwidth {
  background: orange;
}
header {
  height: 50px;
  background: #663399;
}
.mydiv {
  min-height: 50px;
}
footer {
  height: 50px;
  background: #bada55;
}

Dengan memahami pendekatan ini, anda boleh membuat reka bentuk responsif yang menampung kandungan yang melimpah melebihi lebar bekas apabila perlu.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Limpahan Kandungan Melebihi Lebar Bekas dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!