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

最新推荐文章于 2024-07-17 17:02:27 发布

lanqibaoer

最新推荐文章于 2024-07-17 17:02:27 发布

阅读量5.3k

点赞数 1

分类专栏： JS前端开发文章标签： css

本文链接：https://blog.csdn.net/lanqibaoer/article/details/51090587

版权

JS前端开发专栏收录该内容

53 篇文章 0 订阅

订阅专栏

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 class="div-body">
	<div class="div-top">
		<div class="div-top-left"></div>
		<div class="div-top-left"></div>
		<div class="div-top-left"></div>
	</div>
	<div class="div-center">
		<div class="center-outside">
			<div class="center-left"></div>
			<div class="center-center"></div>
			<div class="center-right"></div>
		</div>
		<div class="center-outside">
			<div class="center-left"></div>
			<div class="center-center"></div>
			<div class="center-right"></div>
		</div>
	</div>
	<div class="div-bottom"></div>
</div>

效果图：