js生成多个div并平铺页面

最新推荐文章于 2021-06-18 20:46:17 发布

Amily_an

最新推荐文章于 2021-06-18 20:46:17 发布

阅读量1.7k

点赞数

分类专栏： js 文章标签： js动态生成div div行排列 div换行显示 div数量不固定

本文链接：https://blog.csdn.net/Amily_an/article/details/97903431

版权

js 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

js生成多个div并平铺页面

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<style>
.box{
	margin: 0 auto;
	display: -webkit-flex;
	display: flex;
}
.within{
	width:100%;
	height:200px;
	border:1px solid #c0c0c0;
	margin: 5px 5px;
}
</style>
<body>
<script type="text/javascript">
	var eachDivId = [];
	for(var m = 0; m < 7; m++){

		//每个大div里最多包含3个小div
		if(m % 3 == 0){
			createDiv();
			rowDivId = document.getElementById('rowDiv').id =  "serverType_" + m;
		}
		var rowDiv = document.getElementById(rowDivId);
		oDiv = document.createElement('div');
		oDiv.innerHTML = "<div></div>";
		oDiv.id = rowDivId + "_" + m;
		eachDivId.push(oDiv.id);
		oDiv.className = "within";
		rowDiv.insertBefore(oDiv,rowDiv.lastChild);
	}


	//一行一个大div
	function createDiv(){
		oDiv = document.createElement('div');
		oDiv.innerHTML = "<div></div>";
		oDiv.className = "box";
		oDiv.id = "rowDiv";
		bo = document.body;
		bo.insertBefore(oDiv,bo.lastChild);
	}
</script>
</body>
</html>

Amily_an

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js生成多个div并平铺页面

js生成多个div并平铺页面<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><style>.box{ margin: 0 auto; display: -w...
复制链接

扫一扫