Question

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

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元素，以便删除底部边框？

我找到this question，但没有答案。

Answer 1

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

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

Answer 2

我认为@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;
}

Fiddle代表3列。您可以更改列数而无需更改任何其他列。

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

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

2 个答案: