Advanced Positioning Div. Auto layout to grid

Question

I have a dynamic gallery of images to display using PHP ...

My prob

style and positioning should be that if there is not enough space for the whole div, as in the image above, then the DIVs in the line should place them like the following

centered and equi remote ...

here is a basic JS-Fiddle template if someone wants to try something on jsFiddle

Answer 1

If you want to achieve this with CSS only, the code would be:

#div {
  clear:both;
  width:500px
}
.img {
   display:block;
   width:150px;
   height: 50px;
   float:left;
}

As far as I remember, this is .. Good luck!

Answer 2

CSS div

#div {
width:500px;
}

http://www.art.com/gallery/id--b1823/animals-posters.htm?ui=9E23F1D932F54F2F8F2E37851C860158

, , , - divs

http://www.allposters.com/-st/Animal-Posters_c622_.htm

Answer 3

Google ... . , <ul> a <span>, <li>. , , <ul> . , , -.

, jQuery:

blocksPerRow = Math.floor($('#container').width() / blockWidth);

$('.row ul').each(function () {
  while ($(this).children('li').size() > blocksPerRow)
    ($(this).children('li:last-child').prependTo($(this).nearest('.row').next()));
  while ($(this).children('li').size() < blocksPerRow)
    ($(this).nearest('.row').next().find('li:first-child').prependTo($(this).nearest('.row')));
});

, . $(window).resize(), document ready.