CSS列:每列中的最后一个孩子？

Question

我有一个使用CSS3列数的报纸格式的标题网格.

http://jsfiddle.net/L6TTJ/

HTML:

<ul>
    <li><h3><a href='#'>heading</a></h3><p>snippet</p></li>
    <li><h3><a href='#'>heading</a></h3><p>snippet</p></li>
    <!-- ... etc ... -->
</ul>

CSS(为简洁起见,省略了供应商前缀和非相关规则):

ul {
    column-count: 3;
    column-rule: 1px solid #ccc;
}
li { border-bottom: solid 1px #ccc; }

您可以看到它的发展方向:CSS中是否有任何方法可以定位li每列中的最后一个元素,以便删除底部边框？

我发现了这个问题,但没有答案.

Answer 1

我认为@Vucko 已经给出了答案，为您指明了正确的方向，但它确实不是很有活力。仅当您知道列数和固定行数时，它才适用。我想添加这个答案，提供另一种解决方法来解决您的问题。我不得不说，这只是一种解决方法，它没有使用任何类型的 CSS 选择器，因为正如我所说，Vucko给出的解决方案似乎是唯一最直接的解决方案。

这里的想法是，您可以向该ul元素添加一些伪元素，使其粘在底部并与父元素具有相同的背景，ul以便它可以隐藏底线。遗憾的是它还隐藏了垂直线（column-rule），如果这并不重要，我认为你应该选择这个解决方案：

ul {
  ...
  position:relative;
}

ul:after {
  content:'';
  width:100%;
  height:34px;
  position:absolute;
  background-color:inherit;
  bottom:0;
  left:0;
} 

小提琴 3 列。您可以更改列数，而无需更改任何其他列。

注意：我很确定您的问题没有直接的解决方案（可以动态选择每列中的最后一项）。因为所有项目都布局为列，但实际上它们只是父级包含的内联项目ul。

Answer 2

对于分隔线等,您可以在项目顶部而不是底部添加线条.

这样,您始终可以隐藏每列中的第一行,因为它们处于相同的垂直位置(使用伪元素来覆盖它).