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

Question

我想知道如何连续选择最后一项。我知道第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

Answer 1

在你的情况下，很难根据需要使用nth-child设置css。我认为，只有CSS才有可能。

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

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

<强> Click me to check in responsive layout

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

[编辑]

我找到了另一种方式，

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

演示：codepen.io