欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

如何動(dòng)畫顯示網(wǎng)格布局的擴(kuò)展？

CSS

我想知道我將如何動(dòng)畫網(wǎng)格布局的擴(kuò)展。正如你在代碼中看到的，我有4個(gè)div。其中兩個(gè)會(huì)顯示，另外兩個(gè)只有在復(fù)選框被選中時(shí)才會(huì)顯示。

選中該復(fù)選框時(shí)，會(huì)添加另一行，其中包含div3和div4。我如何讓這個(gè)擴(kuò)展動(dòng)畫化？?jī)?yōu)選保持網(wǎng)格的大小。我不希望動(dòng)畫影響(不存在的)邊距。我也想不用javascript來做這個(gè)?？赡軉?？

<!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="div3">Hello3</div>
        <div class="div4">Hello4</div>
    </div>
</body>
</html>

.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;
}

.div3 {
    display: none;
}

.div4 {
    display: none;
}

.toggle:checked ~ .grid > .div3 {
    display: block;
    grid-column: 1;
    grid-row: 2;
}

.toggle:checked ~ .grid > .div4 {
    display: block;
    grid-column: 2;
    grid-row: 2;
}

我希望div容器向下滑動(dòng)，為添加的行騰出空間。感謝任何幫助。

解決辦法很簡(jiǎn)單。我把我的格子放到另一個(gè)格子里。然后，我簡(jiǎn)單地使用fr作為在放置主網(wǎng)格的div上調(diào)整行大小的方法。這導(dǎo)致了將柵格行從0fr轉(zhuǎn)換到1fr的可能性。就這樣。

.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>