11

我有一个使用 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每列中的最后一个元素，以便我可以删除底部边框？

我找到了这个问题，但没有答案。

4

3 回答 3

8

对于分隔线等，您可以将行添加到项目的顶部而不是底部。

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

于 2015-10-02T19:02:01.223 回答
3

我认为@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 列。您可以更改列数，而无需更改任何其他内容。

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

于 2014-04-15T11:57:42.813 回答
-2

li:nth-child(2n) { 边界底部：无；}

li:nth-child(2n)
{
    border-bottom: none;
}

小提琴

于 2014-04-15T11:30:44.490 回答