javascript - 多div到容器

Question

我想用 40 个或更多 DIV 填充 Container。.cxori 高度和宽度必须在我更改 TOTAL 数字时自动更改

这是我的代码网址:http://jsfiddle.net/kakha13/Lsfkukm0/1/

<div class="container"></div>

j查询

var total  = 40;

for(i=0;i<total;i++){
$("<div class='cxori'></div>").appendTo($(".container"));
}

var cxori = ($('.container').height() +  $('.container').width()) / total;
$(".cxori").css("height",cxori+'px');
$(".cxori").css("width",cxori+'px');

CSS

.container {
    padding:0;margin:0;
    margin:3px auto;
    width:200px;
    height:200px;
    background:grey; 
    border:1px solid black;
}

.cxori {
    z-index:11111;
    display:block; 
    float:left;
    background:red;
}

Answer 1

我认为你需要使用 Math.sqrt .尝试:

var total = 100;

for(i=0;i<total;i++){
$("<div class='cxori'></div>").appendTo($(".container"));
}

var totalPerDimension = Math.sqrt(total);

var width = $('.container').width() / totalPerDimension;
var height =  $('.container').height() / totalPerDimension;
$(".cxori").css("height",width+'px');
$(".cxori").css("width",height+'px');

http://jsfiddle.net/LmktgLey/1/