I was wondering how I can select the last items in a row. I know the nth selector is to select the last items, for example the last 3 items in a row:
.post-entry:nth-last-child(-n+3) { margin-bottom: 0; }
But this doesn't meet my needs. It works great if there are 3 items at the end of the last row, but when there are just 2 last posts, it isn't working.
When you delete one item in the above example, the layout is messed up:
What I would like to know is how to select the last item(s) in the last row without messing up my layout like the image above. Also, if there are only two or maybe one items left.
.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>
Here is my Codepen: http://codepen.io/anon/pen/aZpqbK
Aucun commentaire:
Enregistrer un commentaire