Bagaimana untuk menghidupkan pengembangan susun atur grid?
P粉937382230
2023-08-31 21:09:37
<p>Saya ingin tahu cara menghidupkan pengembangan susun atur grid. Seperti yang anda lihat dalam kod, saya mempunyai 4 div. Dua daripadanya akan dipaparkan, dan dua lagi hanya akan dipaparkan apabila kotak semak dipilih. </p>
<p>Apabila kotak pilihan dipilih, baris lain akan ditambah yang mengandungi div3 dan div4. Bagaimanakah saya menghidupkan sambungan? Adalah lebih baik untuk memastikan saiz grid kecil. Saya tidak mahu animasi menjejaskan margin (tidak wujud). Saya juga mahu melakukan ini tanpa JavaScript. adakah mungkin? </p>
<pre class="brush:php;toolbar:false;"><!DOCTYPE html>
<html>
<kepala>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<pautan rel="stylesheet" href="style.css">
<title>Laman web</title>
</head>
<badan>
<kelas input="togol"jenis="kotak semak">
<div class="grid">
<div class="div1">Hello</div>
<div class="div2">Hello2</div>
<div class="div3">Hello3</div>
<div class="div4">Hello4</div>
</div>
</badan>
</html></pre>
<pre class="brush:php;toolbar:false;">.togol {
lebar: 100%;
}
.grid {
paparan: grid;
lebar: 20%;
sempadan: hitam pejal 2px;
}
.div1 {
lajur grid: 1;
baris grid: 1;
}
.div2 {
lajur grid: 2;
baris grid: 1;
}
.div3 {
paparan: tiada;
}
.div4 {
paparan: tiada;
}
.toggle:checked ~ .grid >
paparan: blok;
lajur grid: 1;
baris grid: 2;
}
.toggle:checked ~ .grid >
paparan: blok;
lajur grid: 2;
baris grid: 2;
}</pre>
<p>Saya mahu bekas div meluncur ke bawah untuk memberi ruang kepada baris yang ditambah. terima kasih atas bantuan anda. </p>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Penyelesaiannya sangat mudah. Saya meletakkan grid saya di dalam grid lain. Kemudian saya hanya menggunakan fr sebagai cara untuk mengubah saiz baris pada div di mana grid utama berada. Ini menyebabkan kemungkinan menukar baris grid daripada 0fr kepada 1fr. Itu sahaja.
.toggle { width: 100%; } .grid { display: grid; width: 20%; border: solid black 2px; } .div1 { grid-column: 1; grid-row: 1; } .div2 { grid-column: 2; grid-row: 1; } .wrapper { grid-column: 1 / 3; grid-row: 2; display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows 200ms; } .div3 { grid-column: 1; grid-row: 1; min-height: 0; } .div4 { grid-column: 2; grid-row: 1; min-height: 0; } .toggle:checked ~ .grid > .wrapper { grid-template-rows: 1fr; }<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="style.css"> <title>Website</title> </head> <body> <input class="toggle" type="checkbox"> <div class="grid"> <div class="div1">Hello</div> <div class="div2">Hello2</div> <div class="wrapper"> <div class="div3">Hello3</div> <div class="div4">Hello4</div> </div> </div> </body> </html>Selain itu, jika anda mempunyai baris yang berbeza dengan saiz yang berbeza dalam grid anda. Contohnya, satu pada 0.05fr dan satu pada 1fr, animasi akan menjadi "laggy". Perkara yang boleh anda lakukan ialah meletakkan grid pembalut di dalam grid pembalut lain. Kemudian, daripada menggunakan baris sebenar untuk menghidupkan grid itu, anda menggunakan kaedah yang sama untuk menghidupkan kanak-kanak grid pertama atau induk grid sebenar.
Ini adalah penyelesaian yang pelik, tetapi ia adalah satu cara untuk menyelesaikan masalah tanpa perlu membuat semula terlalu banyak.