如何在 CSS3 列中定位最后一个孩子？答案

【问题标题】：how to target last-child in a CSS3 column?如何在 CSS3 列中定位最后一个孩子？
【发布时间】：2014-02-28 09:51:30
【问题描述】：

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

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

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

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

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

【问题讨论】：

【解决方案1】：

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

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

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

规范还说：

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

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

【讨论】：

【解决方案2】：

这并不完美，但如果保证您的块大小足够相似，您可以使用 div:nth-child(3n) 之类的东西

【讨论】：