Question

我已经坚持了很久了。我正在构建一个FAQ部分，在台式机上，必须有2列填充FAQ项。这些物品带有阴影，整个物品由Bootstrap 4制成。

我尝试过Flexbox CSS列。现在我已经尝试了CSS Grid，但是仍然有一个问题，就是每当我打开手风琴时，另一侧的物品也会使它的主体膨胀。我附了一支笔来演示这一点。

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

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>

我的SCSS：

#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);
  }

codepen：https://codepen.io/LemonNick/pen/NEjJPQ

任何帮助或建议将不胜感激！现在被卡在这里太久了。

Answer 1

第二个并没有扩大它的身体。但是，相反，li正在跟随网格中的高度。您只需要将li元素的阴影替换为card-body。所以从这个 #faq-accordion .card-faq 。我只是检查了一下，身体保持塌陷。但是李元素的阴影正在产生幻觉。
顺便说一句，我已经调整了你的笔

Answer 2

如果唯一的问题是阴影正在扩展，只需将.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>

像这样https://codepen.io/anon/pen/gQWywr?editors=0100

Answer 3

也许您应该考虑使用几个带浮点数的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>

多列手风琴背景滑动

3 个答案: