我有一个使用
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,但没有答案.
解决方法
我认为@Vucko已经给出了指向正确方向的答案,但它确实不是很有活力.仅当您知道列数和固定行数时才适用.我想添加此答案,提供另一种解决方法来解决您的问题.我不得不说这只是一种解决方法,它不使用任何类型的CSS选择器,因为正如我所说,Vucko给出的解决方案似乎是唯一最直接的解决方案.
这里的想法是你可以在ul元素中添加一些伪元素,使其粘在底部并与父ul具有相同的背景,这样它就可以隐藏底线.遗憾的是它也隐藏了垂直线(列规则),如果这并不重要,我认为你应该选择这个解决方案：
ul {
...
position:relative;
}
ul:after {
content:'';
width:100%;
height:34px;
position:absolute;
background-color:inherit;
bottom:0;
left:0;
}
Fiddle为3列.您可以更改列数而无需更改任何其他列.
注意：我很确定您的问题没有直接解决方案(可以动态选择每列中的最后一项).因为所有项都以列的形式排列,但事实上它们只是父级ul包含的内联项.
