拆分上中下div 且div中嵌套多个横排或竖排div

div拆分上中下,且上div连续多个横排小div,中部div连续多个竖排div,且每个竖排div有三个横排div

@charset "utf-8";

.div-body{
	overflow:auto;
	height:100%;
	min-height:600px;
	border: 1px solid #c0c0c0;
}

.div-top{
	overflow:auto;
	height:10%;
   	min-height:40px;
   	border: 0px;
   	border:1px solid #c0c0c0;
   	padding:6px;
}
.div-center{
	/* margin: 0 auto ;*//* 居中 */
	margin-top:1px;
	width: auto;
	height:60%;
	min-height: 400px;
	border: 1px solid #c0c0c0;
	/* text-align:center; */
	padding:6px;
}
.div-bottom{
	margin-top:1px;
	width: auto;
	height:20%;
	min-height: 80px;
	border: 1px solid #c0c0c0;
	/* text-align:center; */
	padding:6px;
}

.div-top-left{
	width: 20%;
	min-width:80px;
	height:100%;
   	min-height:40px;
   	float:left;
	border: 1px solid #c0c0c0;
	margin-right:3px;
	text-align:center;
}

.center-outside{
	overflow:auto;
	margin-top:1px;
	min-height: 45px;
	border: 1px solid #c0c0c0;
	text-align:center;
	padding:6px;
	margin-bottom: 5px;
}


.center-left{
	width:30%;
	min-width:350px;
	height:100%;
	min-height:43px;
	float: left;
	text-align:center;
	border: 1px solid #c0c0c0;
	/* padding:10px; */
}

.center-center{
	width:40%;
	min-width:500px;
	height:100%;
	min-height:43px;
	float: left;
	margin-left:2px;
	text-align:center;
	border: 1px solid #c0c0c0;
	/* padding:10px; */
}

.center-right{
	overflow:auto;
	min-width:150px;
	height:100%;
	min-height:43px;
	float: left;
	margin-left:2px;
	text-align:center;
	border: 1px solid #c0c0c0;
}
页面样式:


效果图:
拆分上中下div 且div中嵌套多个横排或竖排div_第1张图片

你可能感兴趣的:(JS前端开发)