I'm building a portfolio website.
The front page will have some box images and they will be responsive.
So far I've managed to set them properly with:
- .block img {
float: left;
margin: 1%;
transition: all 1s ease 0s;
width: 24%;
}
when I resize the window, they are moving great, but when the box images has different height, the space between them is different. Here's a screenshot:
http://i62.tinypic.com/2u5urnl.pngI want every box image to have a exact space even the height is different between them.
Here's a demo with boxes:
http://jsfiddle.net/GeekyEggo/zPGVT/ I want box 5 and 7 to be moved close to the 1 and 3 boxes.
This website
http://www.jimmy-olson.com/ has images with different height, they're responsive and the space is equal there, not like mine example.
I've noticed there when I inspect with firebug, the images "left" value is changing every time when I resize the window.
Here's another website that has a same structure:
http://www.nicolasfleure.com/ Is there a jQuery plugin for that?