多栏手风琴背景滑动

Question

我已经坚持这个很久了。我正在构建一个常见问题解答部分，在桌面上，它必须有 2 列来填充它的常见问题解答项目。这些项目有一个阴影，整体是用 Bootstrap 4.

制作的

我试过 Flexbox，CSS 列。现在我已经尝试了 CSS 网格，但是我仍然有一个问题，每当我打开手风琴时，另一边的项目也会扩展它的主体。我包括了一支笔来演示这一点。

更新：忘记了一个重要的细节。这是一个 Wordpress 网站，我使用高级自定义字段 (ACF) 插件创建了一个转发器字段。它将 FAQ 项目输出为数组。因此，项目的数量始终是动态的。他们需要填写 2 列，除非课程只有 1 项。

html是：

<ul id="faq-accordion" class="list-unstyled">
  <li class="card-faq" data-toggle="collapse" data-target="#collapse1" aria-expanded="false" aria-controls="collapse1">
    <div class="card-header" id="heading1">
    <h3>
      <button class="btn btn-link">Accordion 1</button>
    </h3>
    </div>
    <div id="collapse1" class="collapse multi-collapse" aria-labelledby="heading1" data-parent="#faq-accordion">
      <div class="card-body">contents
      </div>
    </div>
  </li>
</ul>

我的小号CSS:

#faq-accordion{
  padding: 40px 30px 60px 30px;
  display: grid;
  grid-gap: 30px;
  grid-template-columns: repeat(2, 50%);
  grid-template-rows: auto;
  grid-auto-flow: row;
  height: auto;
  width: 500px;
  .card-faq{
    margin: 0 15px 20px 15px;
    border: none;
    border-radius: 5px;
    box-shadow: 0px 0px 3px rgba(0,0,0,.1);
  }

代码笔：https://codepen.io/LemonNick/pen/NEjJPQ

如有任何帮助或建议，我们将不胜感激！现在被困在这个问题上太久了。

Answer 1

也许您应该考虑使用几个带有浮动的 div：

<html>
<head>
    <style>
        .faq {
            float:left;
        }
    </style>
</head>
<body>
    <div class="faq"><!--Put your first column cards here--></div>
    <div class="faq"><!--Put your second column cards here--></div>
</body>
</html>

Answer 2

第二个不是扩展它是 body。但是 li 是在跟随高度，因为它在网格中。您只需要将 li 元素的阴影替换为 card-body。所以从这个 #faq-accordion .card-faq .我刚刚检查过 body 是否保持折叠状态。但是 li 元素的阴影正在制造幻觉。
顺便说一句，我已经调整了你的笔

Answer 3

如果唯一的问题是阴影正在扩大，只需将 .card-faq 的内容包裹在另一个 div 中并将阴影移动到那里

#faq-accordion {
  padding: 40px 30px 60px 30px;
  display: grid;
  grid-gap: 30px;
  grid-template-columns: repeat(2, 50%);
  grid-template-rows: auto;
  grid-auto-flow: row;
  height: auto;
  width: 500px;
}

.card-faq {
  margin: 0 15px 20px 15px;
}

.shadow {
  border: none;
  border-radius: 5px;
  box-shadow: 0px 0px 3px rgba(0, 0, 0, .1);
}

<ul id="faq-accordion" class="list-unstyled">
  <li class="card-faq" data-toggle="collapse" data-target="#collapse1" aria-expanded="false" aria-controls="collapse1">
    <div class="shadow">
      <div class="card-header" id="heading1">
        <h3>
          <button class="btn btn-link">Accordion 1</button>
        </h3>
      </div>
      <div id="collapse1" class="collapse multi-collapse" aria-labelledby="heading1" data-parent="#faq-accordion">
        <div class="card-body">contents
        </div>
      </div>
    </div>
  </li>
  <li class="card-faq" data-toggle="collapse" data-target="#collapse1" aria-expanded="false" aria-controls="collapse1">
    <div class="shadow">
      <div class="card-header" id="heading1">
        <h3>
          <button class="btn btn-link">Accordion 1</button>
        </h3>
      </div>
      <div id="collapse1" class="collapse multi-collapse" aria-labelledby="heading1" data-parent="#faq-accordion">
        <div class="card-body">contents
        </div>
      </div>
    </div>
  </li>
</ul>

像这样在你的 codepen 中工作：https://codepen.io/anon/pen/gQWywr?editors=0100

多栏手风琴背景滑动

Multi column accordion background sliding

html

css

grid

accordion