如何在CSS3列中定位last-child？

Question

我有一个3柱砌体式布局：

这是（缩小的）CSS，.block元素在div中：

div {
  column-count: 3;
  column-gap: 12px;
}

.block
    display: inline-block;
    width: 100%;
}

如何在CSS中引用每列（蓝色块）中的最后一个元素？

Answer 1

这在纯CSS中是不可能的，因为无法相对于列来定位元素。它isn't even possible to target the columns themselves：

  

    

无法在列框上设置属性/值。例如，某个列框的背景无法设置，列框没有填充，边距或边框的概念。

  

     

来自w3.org：2. The multi-column model

规范也说：

  

未来的规格可能会增加额外的功能。例如，可以支持不同宽度和不同背景的列。

但是，我怀疑是否会添加此特定功能（以列中的最后一个元素为目标），因为在某些情况下元素可以跨越多个列。

Answer 2

它并不完美，但如果您的积木保证足够相似，您可以使用类似div:nth-child(3n)

的内容