1

I want to create a div container, that contains 6 images. Here is an image:

enter image description here

Inside this container should be more then 6 images, so I used the :nth-child() selector in css. My problem is, that the 6th image is pushed in the next row, and I dont know why.

Here is the code:

*{
  margin: 0px;
  padding: 0px;
}

div{
  width: 750px;
  background-color: grey;
}

div > a{
  display: inline-block;
  height: 120px;
  width: 120px;
  max-height: 120px;
  max-width: 120px;
  margin-right: 6px;
}

div > a:nth-child(6n){
  margin-right: 6px;
}

div > a > img{
  height: 120px;
  width: 120px;
  max-height: 120px;
  max-width: 120px;
}
<div>
  <a>
    <img src="http://lorempixel.com/120/120/"/>
  </a>
  <a>
    <img src="http://lorempixel.com/120/120/"/>
  </a>
  <a>
    <img src="http://lorempixel.com/120/120/"/>
  </a>
  <a>
    <img src="http://lorempixel.com/120/120/"/>
  </a>
  <a>
    <img src="http://lorempixel.com/120/120/"/>
  </a>
  <a>
    <img src="http://lorempixel.com/120/120/"/>
  </a>
</div>

Here is a JSFiddle

MyNewName
  • 1,035
  • 2
  • 18
  • 34

2 Answers2

2

It is the white space margin issue + your CSS rule div > a:nth-child(6n)

Src: https://davidwalsh.name/remove-whitespace-inline-block

Also using div > a:last-child would let you have any number of items and always target the last.

*{
  margin: 0px;
  padding: 0px;
}

div{
  width: 750px;
  background-color: grey;
}

div > a {
  display: inline-block;
  height: 120px;
  width: 120px;
  max-height: 120px;
  max-width: 120px;
  margin-right: 6px;
}

div > a:last-child {
  margin-right: 0px;
}

div > a > img{
  height: 120px;
  width: 120px;
  max-height: 120px;
  max-width: 120px;
}
<div>
  <a>
    <img src="http://lorempixel.com/120/120/"/>
  </a><a>
    <img src="http://lorempixel.com/120/120/"/>
  </a><a>
    <img src="http://lorempixel.com/120/120/"/>
  </a><a>
    <img src="http://lorempixel.com/120/120/"/>
  </a><a>
    <img src="http://lorempixel.com/120/120/"/>
  </a><a>
    <img src="http://lorempixel.com/120/120/"/>
  </a>
</div>

flex would be a recommended way to solve it with today, as all major/newer browsers support it. 

*{
  margin: 0px;
  padding: 0px;
}

div{
  width: 750px;
  background-color: grey;
  display: flex;
}

div > a {
  display: inline-block;
  height: 120px;
  width: 120px;
  max-height: 120px;
  max-width: 120px;
  margin-right: 6px;
}

div > a:last-child {
  margin-right: 0px;
}

div > a > img{
  height: 120px;
  width: 120px;
  max-height: 120px;
  max-width: 120px;
}
<div>
  <a>
    <img src="http://lorempixel.com/120/120/"/>
  </a>
  <a>
    <img src="http://lorempixel.com/120/120/"/>
  </a>
  <a>
    <img src="http://lorempixel.com/120/120/"/>
  </a>
  <a>
    <img src="http://lorempixel.com/120/120/"/>
  </a>
  <a>
    <img src="http://lorempixel.com/120/120/"/>
  </a>
  <a>
    <img src="http://lorempixel.com/120/120/"/>
  </a>
</div>
Asons
  • 84,923
  • 12
  • 110
  • 165
0

Please change the div width as below:

div {
    background-color: grey;
    width: 782px;
}
satya
  • 1,145
  • 8
  • 12