Question

我在容器内的行中有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

Answer 1

您应该使用窗口调整大小事件。请务必在$(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*/
    }
});

降低分辨率后，容器右侧的空白区域

1 个答案: