如何仅选择最后一行中的项目？答案

【问题标题】：How to select only items in the last row?如何仅选择最后一行中的项目？
【发布时间】：2016-10-27 23:51:58
【问题描述】：

我想知道如何选择一行中的最后一项。我知道第n个选择器是选择最后一项，例如连续最后3项：

.post-entry:nth-last-child(-n+3) { margin-bottom: 0; }

但这不能满足我的需要。如果最后一行的末尾有 3 个项目，则效果很好，但是当最后只有 2 个帖子时，它就不起作用了。

当你在上面的例子中删除一个项目时，布局就乱了：

我想知道的是如何选择最后一行中的最后一项，而不会像上图那样弄乱我的布局。此外，如果只剩下两件或一件物品。

.post {
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 3px solid red;
}
.post img {
  width: 100%;
}
.post:nth-last-child(-n+3) {
  margin-bottom: 0;
  border: none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  
  <div class="col-md-4 post"><img src="http://placehold.it/300x200"></div>
  <div class="col-md-4 post"><img src="http://placehold.it/300x200"></div>
  <div class="col-md-4 post"><img src="http://placehold.it/300x200"></div>

  <div class="col-md-4 post"><img src="http://placehold.it/300x200"></div>
  <div class="col-md-4 post"><img src="http://placehold.it/300x200"></div>
  <div class="col-md-4 post"><img src="http://placehold.it/300x200"></div>

  <div class="col-md-4 post"><img src="http://placehold.it/300x200"></div>
  <div class="col-md-4 post"><img src="http://placehold.it/300x200"></div>
  <div class="col-md-4 post"><img src="http://placehold.it/300x200"></div>

</div>

这是我的 Codepen：http://codepen.io/anon/pen/aZpqbK

【问题讨论】：

这对我有用。你用的是什么浏览器
你是什么意思“那么我怎样才能选择一行中的最后一个项目？”你想从最后一个项目中选择多少个项目 ?
更新了我的答案。 @TJ，我的意思是如何选择最后一行中的最后一项。使用第 n 个选择器 -n+3 是可能的，但是当该行不包含 3 个项目时，例如只有 2 个项目，它将网格化我的布局。
@Caspert 我没有看到您发布的任何答案。您使用的术语 last items 没有意义。什么是容器中的last items？一切都期待第一个？
@TJ 道歉，我的意思是我的问题而不是答案。我想选择最后一行，最后一行。更准确地说，如果我有 6 个项目，我希望能够选择第 4 个、第 5 个和第 6 个项目。如果有 7 项，我只想选择第 7 项。如果有 8 个，则选择第 7 项和第 8 项。简而言之：只选择最后一行中的项目。

标签： html css twitter-bootstrap twitter-bootstrap-3 css-selectors

【解决方案1】：

在您的情况下，很难根据需要使用 nth-child 设置 css。我认为，仅使用 CSS 是不可能的。

我尝试过覆盖模式。这不是一个好主意，但在你的情况下它很好。它很简单，适用于所有响应式布局和 n 个项目。

检查结果： click me for 9 items 和 click me for 8 items

Click me to check in responsive layout

.container{    position: relative;}
.post { 
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 3px solid red;
}
.post img { width:100%; }

#overlay-div{
    background-color: white;
    height: 40px;
    width: 100%;
    bottom: 0;
    position: absolute;
}

<div class="container">
  <div class="col-md-4 post"><img src="http://placehold.it/300x200"></div>
  <div class="col-md-4 post"><img src="http://placehold.it/300x200"></div>
  <div class="col-md-4 post"><img src="http://placehold.it/300x200"></div>

  <div class="col-md-4 post"><img src="http://placehold.it/300x200"></div>
  <div class="col-md-4 post"><img src="http://placehold.it/300x200"></div>
  <div class="col-md-4 post"><img src="http://placehold.it/300x200"></div>

  <div class="col-md-4 post"><img src="http://placehold.it/300x200"></div>
  <div class="col-md-4 post"><img src="http://placehold.it/300x200"></div>
  <div class="col-md-4 post"><img src="http://placehold.it/300x200"></div>

  <div id="overlay-div"></div> <!-- this div hide last line of border -->
</div>

[编辑]

我找到了另一种方式，

http://keithclark.co.uk/articles/targeting-first-and-last-rows-in-css-grid-layouts/

演示：codepen.io

【讨论】：

谢谢。我在网上搜索并找到了这个：stackoverflow.com/questions/8641003/css-last-odd-child也许它仍然可以使用 css-only... 你觉得呢？
是的，但它（奇数/偶数）仅适用于两列。上述解决方案适用于 n 列数。 ;)
@Caspert，最后，我找到了仅使用 CSS 的解决方案。请参阅我的编辑部分。