多重容器 | 多重容器

本文介绍了多重容器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I want to fill Container with 40 or more DIVs..cxori height and width must change automatically if i chang TOTAL number

这是我的代码网址：

<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;
}

推荐答案

。尝试：

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');

这篇关于多重容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！