html div 切割上下左右四个div

最新推荐文章于 2023-12-08 10:03:07 发布

lanqibaoer

最新推荐文章于 2023-12-08 10:03:07 发布

阅读量1.3w

点赞数 2

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

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

版权

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

53 篇文章 0 订阅

订阅专栏

.box{
	width:1200px;
	height:100%;
	min-height:550px;
	border: 1px solid #c0c0c0;
}

/**box上*/
.box-top{
	margin: 0 auto;
   	width: auto;
   	height:100%;
   	min-height:80px;
   	border: 1px solid #c0c0c0;
   	margin-top: 5px;
	margin-left: 10px;
	margin-right: 10px;
	text-align:center;
	padding:12px;
}
/**box中*/
.box-center{
	margin: 0 auto;
	width: auto;
	height: 100%;
	min-height:400px;
	border: 1px solid #c0c0c0;
	margin-top: 10px;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom:5px;
	text-align:center;
	padding:12px;
	/* white-space:nowrap;*字体不允许换行 */
}


/**box上左*/
.box-top-left{
	width:300px;
	height:100%;
	min-height:60px;
	float: left;
	text-align:center;
	padding:10px;
	border: 1px solid #c0c0c0;
	/* border-right: 1px solid #c0c0c0; */
}
/**box上右*/
.box-top-right{
	width:800px;
	height:100%;
	min-height:60px;
	float: left;
	text-align:center;
	margin-left:5px;
	padding:10px;
	border: 1px solid #c0c0c0;
}



/**box上左*/
.box-center-left{
	width:300px;
	height:100%;
	min-height:380px;
	float: left;
	text-align:center;
	padding:10px;
	border: 1px solid #c0c0c0;
	/* border-right: 1px solid #c0c0c0; */
}
/**box上右*/
.box-center-right{
	width:800px;
	height:100%;
	min-height:380px;
	float: left;
	text-align:center;
	margin-left:5px;
	padding:10px;
	border: 1px solid #c0c0c0;
	overflow:scroll;
}
</span>

<div class="box">
			<div class="box-top">
				<div class="box-top-left">a</div>
				<div class="box-top-right">b</div>
			</div>
			<div class="box-center">
				<div class="box-center-left">c</div>
				<div class="box-center-right">
					<table class="center-box">
						<thead></thead>
						<tbody></tbody>
					</table>
				</div>
			</div>
		
		</div>