为了账号安全,请及时绑定邮箱和手机立即绑定

多个div横向排列

/ 猿问

多个div横向排列

慕森卡 2019-05-25 17:15:49
画面要求显示一定数量的div元素,比如20个
然后有一个下拉列表来指定每页显示的个数,
Case1:如果每屏显示2个想要的结果就是当前屏幕显示前两个div元素和一个横向滚动条滚动条往右拖,显示第三个和第四个以此类推.
Case12:如果每屏显示四个则当前屏是2*2显示四个和一个横向滚动条滚动条往右拖,显示5~8个div元素.以此类推.
特别注意:不能出现竖的滚动条...
目前的模板代码如下,下面的代码问题是,如果我一行追加元素多了的话,会自动换行显示,而不能显示横向滚动条.
123
functioncreateDiv(){
vars1=document.getElementById('s1');
varitem=s1.value;
varhasChild=container.children.length?true:false;
if(hasChild){
while(container.hasChildNodes())//当div下还存在子节点时循环继续
{
container.removeChild(container.firstChild);
}
}
//制定策略
varstrategy=[2,10,20];
varstrategyRow=[1,2,4];
varstrategyIndex=0;
//获取策略方案
for(varindex=0;indexvarcurrent=strategy[index];
if(item<=current){
strategyIndex=index;
break;
}
}
//使用策略
//当前策略
varrow=strategyRow[strategyIndex];
varcolumn=item/row;
letbodywidth=document.body.clientWidth;
letbodyheight=document.body.clientHeight;
varpercentW=90/column+'%';
varpercentH=90/row+'%';
for(vari=0;ivarrowDiv=document.createElement("div");
for(varj=0;jvarcolumnDiv=document.createElement("div");
columnDiv.style.cssText="margin:10px;border-style:solid;border-width:2px;border-color:#aa0000;float:left;height:"+percentH+";background-color:#00aa00;"+"width:"+percentW+";";
columnDiv.textContent=i+','+j;
rowDiv.appendChild(columnDiv);
}
container.appendChild(rowDiv);
}
}
2
4
6
8
10
20
确定
                    
查看完整描述

2 回答

?
慕九州4526052
描述并不清晰.猜你大概是要显示某些块.
2个:x...←-→
4个:x...x...←-→
6个:x...x...x...←-→css里需要设置禁止换行,你的某个[x]也要根据条件调整height.
                            
查看完整回答
反对 回复 2019-05-25
?
慕前端131612
多尝试自己写
123
functioncreateDiv(){
//假设总数
vartotal=40;
vars1=document.getElementById('s1');
varitem=s1.value
varcontainer=document.getElementById('container');
//清楚上次的append的div
varhasChild=container.children.length?true:false;
if(hasChild){
while(container.hasChildNodes())//当div下还存在子节点时循环继续
{
container.removeChild(container.firstChild);
}
}
varpage=total/item;
//控制横屏大小
container.style.width=page*100+"%";
//制定策略
varstrategy=[2,10,20];
varstrategyRow=[1,2,4];
varstrategyIndex=0;
//获取策略方案
for(varindex=0;indexvarcurrent=strategy[index];
if(item<=current){
strategyIndex=index;
break;
}
}
//使用策略
//当前策略
varrow=strategyRow[strategyIndex];
varcolumn=item/row;
varpagePercent=100/page+'%';
varpercent=((100)-column-1)/column+'%';
for(varpageIndex=0;pageIndexvarpageDiv=document.createElement("div");
pageDiv.style.cssText="width:100%";
for(vari=0;ivarrowDiv=document.createElement("div");
rowDiv.style.cssText="float:left;"+"width:"+pagePercent+";"
for(varj=0;jvarcolumnDiv=document.createElement("div");
columnDiv.style.cssText="box-sizing:border-box;-webkit-box-sizing:border-box;float:left;height:300px;background-color:#00aa00;"+"width:"+percent+";";
columnDiv.class="column";
columnDiv.innerHTML=pageIndex*item+i*column+j;
rowDiv.appendChild(columnDiv);
}
pageDiv.appendChild(rowDiv);
}
container.appendChild(pageDiv);
}
}
2
4
6
8
10
20
确定
                            
查看完整回答
反对 回复 2019-05-25
我要回答
618

相关问题推荐

慕课专栏
更多

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信