css - div 动态显示多行多列
本文介绍了css - div 动态显示多行多列的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
需要实现下列需求的画面
1 画面上有个下拉框,里面的可以选择的数值有 2,4,6,8,10,20
2 根据画面选择的数值,动态显示这么多个div元素. (可以只设置个背景色)
2 对应 一行两列
4 二行二列
6 二行三列
8 二行四列
10 二行五列
20 四行五列
可以使用jquery来动态实现.要求div能够随着窗口大小自动调节,默认排满屏幕.
我只是搭了一个空的框架出来,不知道有哪位前端大侠能帮我实现以下.
我现在的空架子只是在点击按钮的时候,取得下拉框的值,放入p元素.---可以无视这段代码.
<html>
<head>
<script type="text/javascript" src="./jquery/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$("p").html($("#s1").val());
});
});
</script></head>
<body>
<select id='s1'><option value="2">2</option>
<option value="4">4</option>
<option value="6">6</option>
<option value="8">8</option>
<option value="10">10</option>
<option value="20">20</option>
</select>
<p>This is another paragraph.</p>
<button type="button">请点击这里</button></body>
</html>
解决方案
<html>
<head>
<title>123</title>
<script type="text/javascript">
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 = 80 /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=" margin:10px; border-style: solid; border-width: 2px; border-color: #aa0000; float:left;height:300px;background-color: #00aa00;"+"width:" + percent+ ";";
rowDiv.appendChild(columnDiv);
}
container.appendChild(rowDiv);
}
}
</script>
</head>
<body>
<select id="s1" >
<option value="2">2</option>
<option value="4">4</option>
<option value="6">6</option>
<option value="8">8</option>
<option value="10">10</option>
<option value="20">20</option>
</select>
<button onclick="createDiv()">确定</button>
<div id="container" />
</body>
</html>
这篇关于css - div 动态显示多行多列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
