Question

所以基本上我有任意数量的物品，通常在5-10件之间。我想在相同高度的2列中订购这些，或尽可能接近相等（奇数项目）。例如：

1 5
2 6
3 7
4个

我绝对不想要的是它取决于这样的高度：

1 6
2 7
3
4
5个

我知道我可以计算数组的长度并除以2得到第一列的最大索引，如下所示，但我想在CSS中实现这一点：

Math.ceil(( ITEMS.length / 2)) - 1; // Input of 9 outputs 4 as the max index

我尝试过使用Flex和Grid但似乎无法正常工作，但我很可能只是遗漏了一些东西。

Answer 1

感谢Pete的模糊评论（以一种好的方式），我已经弄明白了。

以下示例：

<div class="content-box">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
</div>

.content-box {
  columns: 2 auto;
}

字面意思是CSS one liner haha

https://codepen.io/anon/pen/aGByjL

如何使用CSS（2列，相等高度）实现项目的列类型HTML布局

1 个答案: