Resizing boxes to fill empty space
Hello !
I am using this code :
CSS
- main span{
- display: inline-block;
- height:250px;
- line-height:250px;
- margin:0px;
- border:1px solid #efefef;
- min-width:200px;
- max-width:350px;
- }
HTML
- <main id="main"><span class="items"></span><span class="items"></span><span class="items"></span><span class="items"></span><span class="items"></span><span class="items"></span><span class="items"></span><span class="items"></span><span class="items"></span><span class="items"></span><span class="items"></span><span class="items"></span><span class="items"></span><span class="items"></span><span class="items"></span><span class="items"></span><span class="items"></span><span class="items"></span><span class="items"></span><span class="items"></span></main>
JQUERY
- $(document).ready(function () {
- var $i = 5;
- var $w = $('#main').width();
- var $iw = $w / $i;
- //var $tt = $("#main .items").length;
- $('.items').css("width", $iw + 'px');
- $('.items').text( $iw );
- //$('#width').text( $w + ' -> ' + $tt);
- });
but when resizing the screen I get a lot of empty space around the boxes
How can I do to fill the empty space (they must have a min and max width) ? I can have 2 to 10 boxes in a row no matter
they should always look like the first picture
thanks for helping