JS：扩展一个div的大小会影响所有div的大小

Question

我正在做一个非常简单的练习，使用 div 创建带有按钮的卡片作为显示或隐藏答案的开关。我想重新使用第一张卡片的代码来制作我想要的所有具有相同行为的 div。

这是脚本和练习的链接，因此更容易看到：

<div class="container">

<div class="card">

  <div><img src="https://i.imgur.com/Sv1a28N.png" alt="manzana" /></div>

  <div class="card-title">Apple</div>

  <button class="card-button">Show</button>

  <div class="card-answer">Manzana</div>

</div>

和脚本

var cards = document.getElementsByClassName('card');

  for (var cardIndex in cards) {

    var button = cards[cardIndex].querySelector('.card-button');

      button.addEventListener('click', function(event){

        var currentButton = event.target;

        var currentCard = currentButton.parentNode;

        var currentAnswer = currentCard.querySelector('.card-answer');

    

        if (currentButton.innerHTML == 'Show') {

            currentAnswer.style.display = "block";

            currentButton.innerHTML = 'Hide';

        } else if (currentButton.innerHTML == 'Hide')

        {

            currentAnswer.style.display = 'None';

            currentButton.innerHTML = 'Show';

        }

    })

  }

如果您想查看完整代码，这里还有 codepen 链接：Codepen

问题是，当我单击其中一张卡片中的按钮时，其他卡片的尺寸也会扩大，就像它们也在显示答案一样。该按钮只影响他的直接 div 父母，但似乎同时影响其他卡片的 div 存在一些问题。

我认为这不是 JS 或 HTML 问题，而是 CSS 问题，因为容器具有“flex”属性，而其他容器将其高度调整为第一个。事实上，我尝试调整屏幕大小，它只影响第一行卡片，而不是第二行。我不知道如何解决这个问题，而不必创建一个类来影响被点击的卡片并保持其他卡片目前未被点击。我仍然只是一只蝌蚪，但我想保持代码尽可能简单和干净，并且只保留 Javascript（我想有办法用 Jquery 解决这个问题，但因为这只是一个 JS 练习，我想解决它接着就，随即）。

这是我在这里的第一篇文章，所以请随时添加建议以改进或修复我的问题中的任何内容。谢谢！

Answer 1

align-items: flex-start在你的.container课堂上使用。.container {&nbsp; display: flex;&nbsp; flex-flow: row wrap;&nbsp; justify-content: space-around;&nbsp; align-items: flex-start; // Add this line}