lucasrezador
New Member
See this example ( http://jsfiddle.net/cpSbH/2/ ) and try to resize the window to see what I mean - it is adjusting margins to get as much items on one row as possible, but also to fully use the space and avoid gaps on one side (or both if it would be centred).Is it possible to achieve this without a javascript?ThanksThe code I wrote:HTML:\[code\]<div id="wrapper"> <div class="item">item</div> ... <div class="item">item</div></div>\[/code\]JS:\[code\]$(window).resize(function(){ var minMargin = 10; var width = $("#wrapper").innerWidth(); var itemWidth = $('.item').outerWidth()+minMargin+minMargin var count = Math.floor(width/itemWidth) var space = width - (count*itemWidth); var margin = (space/(count)); if(margin < minMargin) margin = minMargin; margin = Math.floor(margin/2); $('.item').css({'margin-left':margin,'margin-right':margin}); });\[/code\]