CSS列:定位每列的最后一个子对象? [英] CSS columns: target last child in each column?

问题描述

我有一个使用CSS3列数的报纸格式的头条新闻.

I have a grid of headlines in newspaper format using CSS3 column count.

http://jsfiddle.net/L6TTJ/

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 (为简洁起见，省略了供应商前缀和无关的规则):

CSS (vendor prefixes and non-pertinent rules omitted for brevity):

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

您会看到它的去向: CSS中是否有任何方法可以将每一列中的最后一个li元素作为目标，因此我可以删除底部边框?

You can see where this is going: is there any means in CSS to target the last li element in each column so I can remove the bottom border?

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

I found this question, but there's no answer.

推荐答案

我认为@Vucko给出了答案，可以将您指向正确的方向，但实际上并不是很动态.仅当您知道列数和固定行数时才适用.我想添加此答案，以提供另一种 解决方法 来解决您的问题.我不得不说这只是一种解决方法，它不使用任何类型的CSS选择器，因为正如我所说， Vucko 给出的解决方案似乎是唯一最直接的 direct 一.

I think @Vucko has given the answer which points you to the correct direction but it's really not very dynamic. It's applicable only if you know the number of columns and the fixed number of rows. I would like to add this answer providing another workaround to solve your problem. I have to say that it's just a workaround, it does not use any kind of CSS selector because as I said, the solution given by Vucko seems to be the only most direct one.

这里的想法是，您可以只向ul元素添加一些伪元素，使其固定在底部，并且与父级ul具有相同的背景，以便可以隐藏底线.遗憾的是，它也隐藏了垂直线( column-rule )，如果那并不重要，我认为您应该选择以下解决方案:

The idea here is you can just add some pseudo-element to the ul element, make it stick to the bottom and has the same background with the parent ul so that it can hide the bottom lines. It's a pity that it also hides the vertical lines (the column-rule), if that does not really matter, I think you should choose this solution:

ul {
  ...
  position:relative;
}

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

小提琴 3列.您可以更改列数，而不必更改其他任何列.

Fiddle for 3 columns. You can change the number of columns without having to change any other.

注意:我很确定没有直接解决您的问题的方法(可以动态选择每列中的最后一项 >).因为所有项目都按列布置，但实际上它们只是父级ul所包含的内联项目.

NOTE: I'm pretty sure that there is no direct solution to your problem (which can select the last item in each column dynamically). Because all the items are laid out as columns but in fact they are just inline items contained by the parent ul.

这篇关于CSS列:定位每列的最后一个子对象?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！