Question

我想用40个或更多DIV填充Container。 .cxori高度和宽度必须自动更改，如果我改变总数

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

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

jquery的

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/

Answer 2

我认为代码应该是这样的：

var total = 42;

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

//asuming equal
var cntX = Math.ceil(Math.sqrt(total));
var cntY = Math.ceil(total / cntX);

var cxori = $('.container').width() / cntX;
var cyori = $('.container').height() / cntY;

$(".cxori").css("height", cxori + 'px');
$(".cxori").css("width", cyori + 'px');

JsFiddle

它仍有一些舍入错误。这需要另外处理。没有自发的想法如何解决这个问题......

多个div成容器

2 个答案: