CODEWITHSUNDEEP
javascripthtmlcssresponsive-design
Brett
Brett

Reputation: 558

Is it possible to evenly distribute images as container width increases, while increasing or decreasing the number of items in each row?

I have a gallery of images in a fluid container. At the smallest size (980px) there are 5 images across with no margin on the last image so everything fits in the container nicely.

When I increase the width of the window, there is always extra space on the right, until there's enough room for the next image to bump up. Pretty typical. I tried having adaptive images but they get a bit too big for the task as hand.

Is it possible to evenly space the images across the flexible div (I know this possible using the justify css), until the point that there is enough space to fit another image in the row, at which point it would be included?

I currently have the images in a list. 

    <ul>
      <li>image</li>
      <li>image</li>
      <li>image</li>
      <li>image</li>
    </ul>

Items are floated left, with a left margin, except the first child which mas a margin:0;

Fits nice (5 across). http://d.pr/i/q24L

Not so nice (6+ across): http://d.pr/i/VAHi

Upvotes: 2

Views: 346

Answers (2)

Brad
Brad

Reputation: 6342

I'd use media queries to determine the different widths IE: 

@media screen and (max-width: 580px) {

//styles for 5 columns 
}

@media screen and (max-width: 650px) {

//styles for 6 columns 
}

obviously, the width's i've chosen are arbitrary. you'll need to know what those sizes are correct for each column

Per your comment, I've made a fiddle for a JS solution (in jquery). here's the fiddle: http://jsfiddle.net/yEeKe/6/

The JS would look something like this: 

(function($){
    $('#myUL').width($(window).width() - ($(window).width() % $('img').first().width())); 
    $(window).resize(function(){
        $('#myUL').css('width', ($(window).width() - ($(window).width() % $('img').first().width())) +'px');     
    }); 
})(jQuery);

No media queries. obviously, you'd tweak this to accommodate your specific design....

Upvotes: 2

Helstein
Helstein

Reputation: 330

This is possible using display: inline-block; and text-align: justify; (http://jsfiddle.net/7JZJq/2/). However, there may not be enough images to fill the last row entirely. In such case the spaces between images in that row will be different.

Upvotes: 1

Related Questions