How to add line breaks between inline-block elements using CSS?

Question

I have list of images. I want to put a line break after the second image using CSS. I have used a CSS trick listed below but it doesn't work for the inline-block elements. It only works for display inline elements

Code that working for inline Elements.

HTML

<div>
    <a href="#">Dummy Link</a>
    <a href="#">Dummy Link</a>
    <a href="#">Dummy Link</a>
    <a href="#">Dummy Link</a>
</div>
<div>
    <img src="http://placehold.it/50X50" />
    <img src="http://placehold.it/50X50" />
    <img src="http://placehold.it/50X50" />
    <img src="http://placehold.it/50X50" />
</div>

CSS

a:nth-of-type(2):after
{
    white-space: pre;content:'\A';
}
img:nth-of-type(2):after
{
    white-space: pre;content:'\A';
} 

If I am using img element which is display:inine-block by default. The above CSS does not working for it.

Check below fiddle for example

http://jsfiddle.net/murli2308/dD52z/1/

Please let me know if there any way of doing it

Note - I cannot change the HTML structure as it is coming through database.

Answer 1

You cannot use :after pseudo elements with <img> tag. This is because pseudo elements work only with double tags. For achieving the desired result you can give <br> tag after each <img> and style the <br> instead.

<div>
  <a href="#">Dummy Link</a>
  <a href="#">Dummy Link</a>
  <a href="#">Dummy Link</a>
  <a href="#">Dummy Link</a>
</div>
<div>
  <img src="http://placehold.it/50X50" />
  <br>
  <img src="http://placehold.it/50X50" />
  <br>
  <img src="http://placehold.it/50X50" />
  <br>
  <img src="http://placehold.it/50X50" />
  <br>
</div>

And in the css you can style the <br> tag like this:

a:nth-of-type(2):after
{
    white-space: pre;content:'\A';
}
br{
  display: none;
}
br:nth-of-type(2){
  display:block;
}

Answer 2

EDITED:

img:nth-of-type(2n)
{
  float: left;
}

img:nth-of-type(2n-1)
{
    display: inline;
    clear: left;
  float: left;
}

Inline as default, float left and nothing (clear) on left. But on FIRST (and even) not the SECOND.

To put image centered in the div, just add also a padding.

2nd edit:

      <div>
    <a href="#">Dummy Link</a>
    <a href="#">Dummy Link</a>
    <a href="#">Dummy Link</a>
    <a href="#">Dummy Link</a>
  </div>
<div id="outer" style="background: yellow;  margin:0px auto; width: 110px">
  <div id="fromsql">
    <img src="http://placehold.it/50X50" />
    <img src="http://placehold.it/50X50" />
    <img src="http://placehold.it/50X50" />
    <img src="http://placehold.it/50X50" />
  </div>
    <div style="clear: both;">
</div>

So basically you can add an outer div with a fixed size and center it. Elements inside div fromsql keep floating in a reduced space

Answer 3

Here is how you can break line after each inline block.

div { letter-spacing: 9999px; }

div a, div img { display: inline-block; letter-spacing: initial; }

Answer 4

a:nth-of-type(2), img:nth-of-type(2) {
  display: block;
}

Answer 5

Try div>img>img as selector. Add some bottom margin.

Hope this is what youre looking for?

Another way is to wrap the two images in a div

Answer 6

Depending on the effect you're trying to achieve, an alternative - and potentially simpler - way to achieve the same effect might be to use floated block (as opposed to inline-block) elements, which would allow you to use clear: left to produce a line-break wherever required.

Answer 7

It will work if you'll make it block

img:nth-of-type(2)
{
    display:block;    
}