最後の行のアイテムのみを選択する方法は？

Question

最後の行をどのように選択するのかと思っていました。

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

しかし、これは私のニーズを満たしていない：私は、n番目のセレクタは、例えば、最後の項目、行の最後の3つの項目を選択することです知っています。最後の行の最後に3つの項目がある場合はうまくいきますが、最後の2つの投稿だけが機能していません。

あなたは上記の例では一つのアイテムを削除すると、レイアウトがめちゃくちゃされています

私が知りたいのですが、何がなくて、最後の行の最後の項目（複数可）を選択する方法です上記のイメージのように私のレイアウトを台無しにする。また、2つだけ、または1つのアイテムが残っている場合もあります。

.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

あなたの場合にはn番目の子を使用して、必要に応じて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>

[EDIT]

私は別の方法を見つけ

、

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

デモは：codepen.io