降低分辨率后容器右侧的空白处

-1

我在容器内部的行中放置了div。当窗口的大小发生变化时，一行中的div数量也会变化。但是，在现在使用div的地方，我有空白空间。降低分辨率后容器右侧的空白处

如何让容器的宽度适合连续的div数量？这里是我的代码

HTML：

<select> 
<option value="12">6</option> 
<option value="16">8</option> 
<option value="24">12</option> 
</select> 
<button>OK</button> 
<div id='container'></div>

CSS：

#container{ 
border-style: solid; 
float:left; 

} 
.square{ 
    float:left; 
    width: 100px; 
    height: 100px; 
    background-color: red; 
    margin-top: 10px; 
    margin-left: 10px; 
    margin-right: 10px; 
    margin-bottom: 10px; 
}

的jQuery：

$(document).ready(function(){ 

$("button").click(function(){ 
var br=0; 
$('#container').html(''); 
var k=$('select').val(); 
br=k/4-1; 
contained_divs = ''; 
for(var i=0;i<k;i++) 
{ 
    contained_divs += '<div class="square"></div>'; 

    if(i!=0 && i%br==0) 
    { 
     contained_divs += '<br>'; 
    } 


} 
$('#container').append(contained_divs); 
}); 
});

和jfiddle

来源

2016-01-16 androlama

为什么不把宽度设置为480px？ – jeremy

，因为我想宽度更改为分辨率 – androlama

那么为什么你使用固定布局？ – jeremy

呦你应该使用窗口大小调整事件。请确保在$(document).ready中也使用此项。

$(window).resize(function(){ 
    if(window.innerWidth > 480){ 
     $("#container").css("width","480"); 
    } else if(window.innerWidth < 480) { 
     $("#container").css("width","380"); 
    /*And keep going till getting your result*/ 
    } 
});

来源

2016-01-16 22:43:59

降低分辨率后容器右侧的空白处

回答

相关问题