如何防止项目计数（动态）破坏CSS列内部？

Question

有column-count，但我想知道是否有＆＃34; item-count＆＃34;对于CSS列中的项目？我无法在我的3列常见问题解答中保留固定项目的数量，而没有为列本身指定高度。

在这个例子中，我希望每个列都有3个项目，无论每个项目中的问题或答案有多长。在实际的网站中，我不知道确切的项目数量，所以我只是想让它们保持平衡＆＃34;。

你可以看到我尝试使用flexbox，但答案面板将保存动态内容（与问题/项目的数量相同）。我的目的是在显示答案面板时使其看起来像砖石布局。

＆＃13;

＆＃13;

.m-faqs {
  /*display: flex;
  flex-flow: row wrap;
  justify-content: space-between;*/
  column-count: 3;
  column-gap: 50px;
}

.m-faqs_item {
  margin-bottom: 20px;
  position: relative;
  /*flex: 0 0 47%;
  align-self: baseline;*/
  display: inline-block;
  break-inside: avoid;
  width: 100%;
}

.m-faqs_title {
  margin-top: 0;
  margin-bottom: 0;
}

.m-faqs_question {}

.m-faqs_question-link {
  display: inline-block;
}

.m-faqs_answer {}

.m-faqs_item.active .m-faqs_answer {
  display: block;
}

＆＃13;

<div class="m-faqs">
  <div class="m-faqs_item">
    <h3 class="m-faqs_title"><span class="m-faqs_question">Question here</span></h3>
    <div class="m-faqs_answer">
      <p>Here's the answer.</p>
    </div>
  </div>
  <div class="m-faqs_item">
    <h3 class="m-faqs_title"><span class="m-faqs_question">Question here</span></h3>
    <div class="m-faqs_answer">
      <p>Here's the answer.</p>
    </div>
  </div>
  <div class="m-faqs_item">
    <h3 class="m-faqs_title"><span class="m-faqs_question">Question here</span></h3>
    <div class="m-faqs_answer">
      <p>Here's the answer.</p>
    </div>
  </div>
  <div class="m-faqs_item">
    <h3 class="m-faqs_title"><span class="m-faqs_question">Question here</span></h3>
    <div class="m-faqs_answer">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
  </div>
  <div class="m-faqs_item">
    <h3 class="m-faqs_title"><span class="m-faqs_question">Question here</span></h3>
    <div class="m-faqs_answer">
      <p>Here's the answer.</p>
    </div>
  </div>
  <div class="m-faqs_item">
    <h3 class="m-faqs_title"><span class="m-faqs_question">Question here</span></h3>
    <div class="m-faqs_answer">
      <p>Here's the answer.</p>
    </div>
  </div>
  <div class="m-faqs_item">
    <h3 class="m-faqs_title"><span class="m-faqs_question">Question here</span></h3>
    <div class="m-faqs_answer">
      <p>Here's the answer.</p>
    </div>
  </div>
  <div class="m-faqs_item">
    <h3 class="m-faqs_title"><span class="m-faqs_question">Question here</span></h3>
    <div class="m-faqs_answer">
      <p>Here's the answer.</p>
    </div>
  </div>
  <div class="m-faqs_item">
    <h3 class="m-faqs_title"><span class="m-faqs_question">Question here</span></h3>
    <div class="m-faqs_answer">
      <p>Here's the answer.</p> 
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用column-count时，可用空间按给定的文本量分配，而不是给定的项目数量。当容器没有指定高度时，文本将均匀分布，因此如果较长的问题占用更多空间，则在下一列中可以将空间分配给两个问题，就像我们在您的示例中看到的那样。

有几种解决方法：

1. 最简单和最有效的方法是呈现具有分为3个容器的项目的HTML，或者使用可以计算所有项目并将它们包装到容器中的JS代码。然后，每个容器都是一个完全符合您描述的行。

2. 使用网格。缺点是它没有很好的浏览器覆盖率，并且它看起来不像你可能期望的那样：

＆＃13;
＆＃13;
.m-faqs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 50px;
}

.m-faqs_item {
  margin-bottom: 20px;
}
＆＃13;
<div class="m-faqs">
  <div class="m-faqs_item">
    <h3 class="m-faqs_title"><span class="m-faqs_question">Question here</span></h3>
    <div class="m-faqs_answer">
      <p>Here's the answer.</p>
    </div>
  </div>
  <div class="m-faqs_item">
    <h3 class="m-faqs_title"><span class="m-faqs_question">Question here</span></h3>
    <div class="m-faqs_answer">
      <p>Here's the answer.</p>
    </div>
  </div>
  <div class="m-faqs_item">
    <h3 class="m-faqs_title"><span class="m-faqs_question">Question here</span></h3>
    <div class="m-faqs_answer">
      <p>Here's the answer.</p>
    </div>
  </div>
  <div class="m-faqs_item">
    <h3 class="m-faqs_title"><span class="m-faqs_question">Question here</span></h3>
    <div class="m-faqs_answer">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
  </div>
  <div class="m-faqs_item">
    <h3 class="m-faqs_title"><span class="m-faqs_question">Question here</span></h3>
    <div class="m-faqs_answer">
      <p>Here's the answer.</p>
    </div>
  </div>
  <div class="m-faqs_item">
    <h3 class="m-faqs_title"><span class="m-faqs_question">Question here</span></h3>
    <div class="m-faqs_answer">
      <p>Here's the answer.</p>
    </div>
  </div>
  <div class="m-faqs_item">
    <h3 class="m-faqs_title"><span class="m-faqs_question">Question here</span></h3>
    <div class="m-faqs_answer">
      <p>Here's the answer.</p>
    </div>
  </div>
  <div class="m-faqs_item">
    <h3 class="m-faqs_title"><span class="m-faqs_question">Question here</span></h3>
    <div class="m-faqs_answer">
      <p>Here's the answer.</p>
    </div>
  </div>
  <div class="m-faqs_item">
    <h3 class="m-faqs_title"><span class="m-faqs_question">Question here</span></h3>
    <div class="m-faqs_answer">
      <p>Here's the answer.</p>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;
1. 灵活解决方案存在同样的问题，除了flexbox具有更好的覆盖范围，可以安全地用于所有浏览器。
＆＃13;
＆＃13;
.m-faqs {
  display: flex;
  flex-wrap: wrap;
}

.m-faqs_item {
  width: calc((100% - 150px)/3);
}
.m-faqs_item:nth-of-type(3n), .m-faqs_item:nth-of-type(3n + 2) {
  margin-left: 50px;
}
＆＃13;
<div class="m-faqs">
  <div class="m-faqs_item">
    <h3 class="m-faqs_title"><span class="m-faqs_question">Question here</span></h3>
    <div class="m-faqs_answer">
      <p>Here's the answer.</p>
    </div>
  </div>
  <div class="m-faqs_item">
    <h3 class="m-faqs_title"><span class="m-faqs_question">Question here</span></h3>
    <div class="m-faqs_answer">
      <p>Here's the answer.</p>
    </div>
  </div>
  <div class="m-faqs_item">
    <h3 class="m-faqs_title"><span class="m-faqs_question">Question here</span></h3>
    <div class="m-faqs_answer">
      <p>Here's the answer.</p>
    </div>
  </div>
  <div class="m-faqs_item">
    <h3 class="m-faqs_title"><span class="m-faqs_question">Question here</span></h3>
    <div class="m-faqs_answer">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
  </div>
  <div class="m-faqs_item">
    <h3 class="m-faqs_title"><span class="m-faqs_question">Question here</span></h3>
    <div class="m-faqs_answer">
      <p>Here's the answer.</p>
    </div>
  </div>
  <div class="m-faqs_item">
    <h3 class="m-faqs_title"><span class="m-faqs_question">Question here</span></h3>
    <div class="m-faqs_answer">
      <p>Here's the answer.</p>
    </div>
  </div>
  <div class="m-faqs_item">
    <h3 class="m-faqs_title"><span class="m-faqs_question">Question here</span></h3>
    <div class="m-faqs_answer">
      <p>Here's the answer.</p>
    </div>
  </div>
  <div class="m-faqs_item">
    <h3 class="m-faqs_title"><span class="m-faqs_question">Question here</span></h3>
    <div class="m-faqs_answer">
      <p>Here's the answer.</p>
    </div>
  </div>
  <div class="m-faqs_item">
    <h3 class="m-faqs_title"><span class="m-faqs_question">Question here</span></h3>
    <div class="m-faqs_answer">
      <p>Here's the answer.</p>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

除此之外，我认为没有任何令人满意的CSS解决方案。