如何在CSS3列中定位last-child？ [英] how to target last-child in a CSS3 column?

问题描述

我有一个3列的砖石风格布局：

I've got a 3 column masonry-style layout:

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

Here's the (shrunk) CSS, .block elements are inside the div:

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

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

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

How can I reference the last element in each column (the blue blocks) in CSS?

推荐答案

目前在纯CSS中是不可能的，因为不可能相对于列来定位元素。它甚至无法定位列本身：

This currently isn't possible in pure CSS as it is not possible to target elements relative to the columns. It isn't even possible to target the columns themselves:

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

It is not possible to set properties/values on column boxes. For example, the background of a certain column box cannot be set and a column box has no concept of padding, margin or borders.

从w3.org： 2。多栏模型

规格也说：

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

Future specifications may add additional functionality. For example, columns of different widths and different backgrounds may be supported.

但是，我怀疑这个特殊功能元素在列中）将被添加，因为在某些情况下元素可以跨多个列的事实。

However, I have doubts that this particular feature (targeting the last element in a column) will ever be added, because of the fact that elements can span multiple column in some cases.

这篇关于如何在CSS3列中定位last-child？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！