function createDiv() {
var s1 = document.getElementById('s1');
var item = s1.value;
var hasChild = container.children.length ? true : false;
if(hasChild){
while(container.hasChildNodes()) //当div下还存在子节点时 循环继续
{
container.removeChild(container.firstChild);
}
}
//制定策略
var strategy =[2,10,20];
var strategyRow = [1,2,4];
var strategyIndex = 0;
//获取策略方案
for( var index = 0 ; index < strategy.length ; index++) {
var current = strategy[index];
if (item <= current) {
strategyIndex = index;
break;
}
}
//使用策略
//当前策略
var row = strategyRow[strategyIndex];
var column = item / row;
var percent = (100 - column - 1 ) /column + '%';
for(var i = 0; i < row; i++){
var rowDiv = document.createElement("div");
for(var j = 0; j < column; j++){
var columnDiv = document.createElement("div");
columnDiv.style.cssText=" float:left;height:300px;background-color: #00aa00;"+"width:" + percent+ ";";
columnDiv.class = "column";
rowDiv.appendChild(columnDiv);
}
container.appendChild(rowDiv);
}
}
html{
height: 100%;
}
body{
height: 100%;
margin: 0px;
}
.content aside{
display: block; height:100%; width:50px; background-color:red;
}
#container div > div{
margin-right: 1% ;
}
#container div > div:first-child{
margin-left: 1% ;
}
/*#container div> div:nth-child(2n+1){
margin-left: 5px ;
}*/
2
4
6
8
10
20
确定