降低分辨率後容器右側的空白處

-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

降低分辨率後容器右側的空白處

回答

相關問題