需要 CSS 布局建议

Question

我有一些过滤器列表。我的目标是让它们显示为彼此相邻的三行 (cb1&2/cb3&4/cb5)。

“checkbox_container” block 是通过 CMS 自动创建的。因此我不能在它们之间添加 div 来创建列。

我可以通过绝对定位来做到这一点，但我不想这样做，以防将来过滤器发生变化而导致布局问题。

有没有人知道如何使用 CSS 和/或 JS 实现这一点？

这就是CMS输出的checkbox容器的基本结构。

<div class="checkboxes">
  <div class="checkbox_container cb01">
    <div class="entry"></div>
  </div>
  <div class="checkbox_container cb02">
    <div class="entry"></div>
    <div class="entry"></div>
  </div>
  <div class="checkbox_container cb03">
    <div class="entry"></div>
    <div class="entry"></div>
  </div>
  <div class="checkbox_container cb04">
    <div class="entry"></div>
  </div>
  <div class="checkbox_container cb05">
    <div class="entry"></div>
    <div class="entry"></div>
    <div class="entry"></div>
    <div class="entry"></div>
  </div>
</div>

Answer 1

在这里你去 jsfiddle.net/50t7oLga/1，使用带有方向列的 flexbox 并给包装器一个高度来强制元素包装