在第一个 div 的高度增加时将第二个 div 推到下面答案

【问题标题】：Push the second div below on increase in height of first div在第一个 div 的高度增加时将第二个 div 推到下面
【发布时间】：2021-09-13 14:21:27
【问题描述】：

我正在制作手风琴按钮并将其 div 包裹在一个 div 容器中。我想将它们保持在 2 列的网格中。如下所示，

但是当我打开其中一个时，下面的 div 应该向下推。我尝试同时使用display:grid 和display:flex，但它没有被推送。它位于第二个手风琴按钮的后面。我怎么推？我只需要一个想法。不是确切的代码。

【问题讨论】：

分享您的代码以了解问题
没有足够的代码，很难知道你到底想要什么？
我不想要确切的代码。我只是想讨论一下你将如何实现这样的目标？

标签： css sass

【解决方案1】：

您需要展开下拉菜单。我认为发生的情况是下拉菜单显示在其他下拉菜单之上，因此其他下拉菜单不会被下推。

这是它的代码

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.collapsible {
    background-color: grey;
    color: white;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
}


.content {
    padding: 0 18px;
    display: none;
    overflow: hidden;
    background-color: white;
    border: 1px solid black;
}
</style>
</head>
<body>
<button type="button" class="collapsible">Dropdown 1</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet</p>
</div>
<button type="button" class="collapsible">Dropdown 2</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet</p>
</div>
<button type="button" class="collapsible">Dropdown 3</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet</p>
</div>

<script>
    let coll = document.getElementsByClassName("collapsible");
    let i;

    for (i = 0; i < coll.length; i++) {
        coll[i].addEventListener("click", function() {
            let content = this.nextElementSibling;
            if (content.style.display === "block") {
            content.style.display = "none";
            } else {
            content.style.display = "block";
            }
        });
    }
</script>

</body>
</html>

这里content 显示为none。单击它时，content 将显示block。当按钮被点击时，Javascript 会检查，如果content 有块显示，它会将其更改为none，反之亦然。

我希望你能理解我的代码。尝试查看来自 w3schools 的this link 以获取更多详细信息。还有一个部分可用于动画下拉和添加图标。

【讨论】：