html - 如何防止项目计数（动态）在 CSS 列中中断？

Question

有column-count，但我想知道 CSS 列中的项目是否有“项目计数”之类的东西？我在尝试在我的 3 Column FAQs 中保持固定的项目数量而不指定列本身的高度时遇到了麻烦。

在此示例中，我希望每列有 3 个项目，无论每个项目中的问题或答案有多长。在实际站点中，我不知道项目的确切数量，所以我只想让它们保持“平衡”。

您可以看到我尝试使用 flexbox，但答案面板将包含动态内容（问题/项目的数量也是如此）。我的目标是在显示答案面板时让它看起来像砖石布局。

.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;
}

<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>

score 0 · Accepted Answer

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

有几种解决方法：

最简单和最有效的方法是渲染将项目分为 3 个容器的 HTML，或者使用 JS 代码计算所有项目并将它们包装到容器中。然后，每个容器都将是一列，其行为与您描述的完全相同。
使用网格。缺点是它没有很好的浏览器覆盖率，而且看起来也不像您可能期望的那样：

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

.m-faqs_item {
  margin-bottom: 20px;
}

<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>

flex 解决方案也存在同样的显示问题，除了 flexbox 具有更好的覆盖范围并且可以安全地用于所有浏览器。

.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;
}

<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>

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

html - 如何防止项目计数（动态）在 CSS 列中中断？

1 回答 1

Related

Reference