打开引导手风琴时，旁边的手风琴也会改变高度

Question

我有一个使用引导手风琴选项卡的常见问题解答页面。问题是我将它们分开 50/50 并排，但现在当打开一个选项卡时，它旁边的一个也会打开（没有它的内容）

例子：

这是我的html：

<div id="faqresult">
    <div class="col-md-12 animatedopen">
       <div class="vragen-wrapper">
         <div class="masonry-header">
          <h3 id="betalen">Betalen</h3>
         </div>
         <div class="masonry-vragen faqcontainer">
      
          <div class="card">
            <div class="card-header" id="heading1">
              <h5 class="mb-0">
                <button class=" collapsed FAQ-button" data-toggle="collapse" data-target="#collapse1" aria-expanded="false" aria-controls="collapse1">
                  Welke betalingstermijn hanteren jullie?
                  <i class="fas fa-chevron-down"></i>
                </button>
              </h5>
            </div>
            <div id="collapse1" class="collapse " aria-labelledby="heading1" data-parent="#accordion">
              <div class="card-body">
                <p>Bij een eerste bestelling dient er vooruit betaald te worden, hierna is eventueel betaling mogelijk op factuur.</p>
              </div>
            </div>
          </div>
          
          <div class="card">
            <div class="card-header" id="heading2">
              <h5 class="mb-0">
                <button class=" collapsed FAQ-button" data-toggle="collapse" data-target="#collapse2" aria-expanded="false" aria-controls="collapse2">
                  Op welke manieren kan ik betalen?
                  <i class="fas fa-chevron-down"></i>
                </button>
              </h5>
            </div>
            <div id="collapse2" class="collapse " aria-labelledby="heading2" data-parent="#accordion">
              <div class="card-body">
                <p>De eerste bestelling altijd vooraf, daarna eventueel betaling mogelijk op factuur. Bij een eerste bestelling of betaling vooraf wordt een inschatting gemaakt van de verzendkosten. Deze zullen op basis van nacalculatie nogmaals berekend worden. Voor het verschil in kosten kan eventueel nog een aanvullende factuur volgen.</p>
              </div>
            </div>
          </div>
          
          <div class="card">
            <div class="card-header" id="heading3">
              <h5 class="mb-0">
                <button class=" collapsed FAQ-button" data-toggle="collapse" data-target="#collapse3" aria-expanded="false" aria-controls="collapse3">
                  Wanneer ontvang ik mijn factuur?
                  <i class="fas fa-chevron-down"></i>
                </button>
              </h5>
            </div>
            <div id="collapse3" class="collapse " aria-labelledby="heading3" data-parent="#accordion">
              <div class="card-body">
                <p>De factuur ontvang je na levering</p>
              </div>
            </div>
          </div>
          
         </div>
       </div>
    </div>
</div>

为什么我打开的手风琴旁边的手风琴高度也发生了变化？可能和我拆分它们的方式有关？

我应用了这个 CSS 让它们按 50/50 分割：

#faqresult{
  width:100%;
}

.faqcontainer{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.faqcontainer .card{
  flex: 0 0 49.5%;
}

下面回答后的结果：

效果很好：

但第二个没有：

Answer 1

您的 *.faqcontainer 上的align-items: flex-start; 应该是解决方案。

flex-start：项目的cross-start margin边缘放置在cross-start线上

align-items 具有默认模式拉伸：

stretch（默认）：拉伸以填充容器（仍然尊重 min-width/max-width）

更新

你可以做这样的结构

.container
  .column_container
    .card
    .card
  .column_container
    .card
    .card

像这样的css

#faqresult{
  width:100%;
}

.faqcontainer{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  align-content: flex-start;
  flex-direction: row;
}
.faqcontainer .column_container{
  width: 49.5%;
}
.faqcontainer .column_container .card{
  width: 100%;
}