简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Bagaimana untuk menghidupkan pengembangan susun atur grid?
P粉937382230
P粉937382230 2023-08-31 21:09:37
0
1
475
<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>
P粉937382230
P粉937382230

membalas semua(1)
P粉529581199
P粉5295811992023-09-01 15:18:03 Tingkat 1

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.

Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！