Rumah > Artikel > hujung hadapan web > Mengapakah grid dengan 100% grid-template-lajur melangkaui badan apabila menggunakan kedudukan tetap?
Grid Melebihi Kandungan dengan 100% Grid-Template-Columns
Mengapa grid paparan dengan 100% dalam grid-template-lajur memanjang di luar badan apabila kedudukan ditetapkan kepada tetap?
Masalah:
Pertimbangkan CSS dan HTML berikut:
<div class='parent'><br> <div class='left'>LEFT</div><br> <div class='right'> KANAN</div><br></div>
Apabila kedudukan tidak ditetapkan, grid dipaparkan dengan betul. Walau bagaimanapun, apabila kedudukan ditetapkan kepada tetap, grid melangkaui badan di sebelah kanan.
Penyelesaian:
Isunya bukan terletak pada lebar 100% tetapi dengan sifat grid-template-lajur. Menggunakan peratusan dan jurang grid tetap akan melebihi 100% daripada ruang yang ada.
Sebaliknya, bergantung pada unit fr untuk mengagihkan ruang kosong secara berkadar, dengan mengambil kira jurang grid:
.induk {<br> kedudukan:tetap;<br> lebar:100%;<br> kiri:0 ;<br> atas:14px;<br> paparan:grid;<br> grid-template-columns:4fr 6fr;<br> grid-gap:5px;<br> latar belakang:#eee;<br>}<br>.kiri {<br> sempadan:2px merah pepejal;<br>}<br>.kanan {<br> sempadan:2px merah pepejal;<br>}
<div class='parent'><br> <div class='left'>LEFT</div><br> <div class= 'kanan'>KANAN</div><br></div>
Dengan menggunakan unit fr, grid kini akan mengagihkan ruang dengan betul , memastikan ia kekal dalam lingkungan badan.
Atas ialah kandungan terperinci Mengapakah grid dengan 100% grid-template-lajur melangkaui badan apabila menggunakan kedudukan tetap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!