


Bagaimanakah Saya Boleh Membuat Limpahan Kandungan Melebihi Lebar Bekas dalam CSS?
Jan 03, 2025 pm 12:30 PMMemperluas 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!

Artikel Panas

Alat panas Tag

Artikel Panas

Tag artikel panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Menambah bayang -bayang kotak ke blok dan elemen WordPress

Buat borang hubungan JavaScript dengan rangka kerja pintar

Buat editor teks sebaris dengan atribut yang boleh dipertikaikan

Menjadikan Peralihan Svelte Khas pertama anda

Pembaca Skrin Demystifying: Borang & Amalan Terbaik Diakses

Membandingkan 5 Pembina Borang PHP Terbaik (dan 3 skrip percuma)

Muat naik fail dengan multer di node.js dan ekspres
