DIV嵌套相关实例

最新推荐文章于 2023-09-05 17:23:11 发布

Aaron莫言

最新推荐文章于 2023-09-05 17:23:11 发布

阅读量1.8k

点赞数

分类专栏： Java

本文链接：https://blog.csdn.net/aoxiangzhe/article/details/100690007

版权

Java 专栏收录该内容

75 篇文章 5 订阅

订阅专栏

相关代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">

.div-body{
	overflow:auto;
	height:100%;
	min-height:600px;
	border: 1px solid #750075;
}
 
.div-top{
	overflow:auto;
	height:10%;
   	min-height:40px;
   	border: 0px;
   	border:1px solid #AE57A4;
   	padding:6px;
}
.div-center{
	/* margin: 0 auto ;*//* 居中 */
	margin-top:1px;
	width: auto;
	height:60%;
	min-height: 400px;
	border: 10px solid #E800E8;
	/* text-align:center; */
	padding:6px;
}
.div-bottom{
	margin-top:1px;
	width: auto;
	height:20%;
	min-height: 80px;
	border: 1px solid #5B4B00;
	/* text-align:center; */
	padding:6px;
}
 
.div-top-left{
	width: 20%;
	min-width:80px;
	height:100%;
   	min-height:40px;
   	float:left;
	border: 1px solid orange;
	margin-right:3px;
	text-align:center;
}
 
.center-outside{
	overflow:auto;
	margin-top:1px;
	min-height: 45px;
	border: 10px solid red;
	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: 10px solid blue;
	/* 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 red;
	/* 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 #00AEAE;
}
</style>
<body>
	<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>
</body>
</html>

Aaron莫言

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
DIV嵌套相关实例

相关代码如下：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><style type="text/css">.div-body{ overflow:auto; height:...
复制链接

扫一扫