HTML左中右div布局

最新推荐文章于 2024-02-18 19:14:26 发布

黄宝康

最新推荐文章于 2024-02-18 19:14:26 发布

阅读量2.4k

点赞数 1

分类专栏： html

本文链接：https://blog.csdn.net/huangbaokang/article/details/104798981

版权

html 专栏收录该内容

29 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<style type="text/css">
		*{
			margin: 0;padding: 0
		}
		#wrap{  
			width:100%;  
			margin:0 auto;  
		}  
		#header{  
			/* margin:20px;   */
			height:80px;  
			border:solid 1px #0000FF;  
		}  
		#container{  
			position:relative;  
			margin-top:20px;  
			height:400px;  
		}  
		#left_side{  
			position:absolute;  
			top:0px;  
			left:0px;  
			border:solid 1px #0000FF;  
			width:170px;  
			height:100%;  
		}  
		#content{  
			margin:0px 190px 0px 190px;  
			border:solid 1px #0000FF;  
			height:100%;  
		}  
		#right_side{  
			position:absolute;  
			top:0px;  
			right:0px;  
			border:solid 1px #0000FF;  
			width:170px;  
			height:100%;  
		}  
		#footer{  
			margin-top:20px;  
			height:80px;  
			border:solid 1px #0000FF;  
		}  
	</style>
</head>
<body>
	<div id="wrap">  
		<div id="header">header</div>  
		<div id="container">  
			<div id="left_side">left_side</div>  
			<div id="content">content</div>  
			<div id="right_side">right-side</div>  
		</div>  
		<div id="footer">footer</div>  
	</div>  
</body>
</html>

黄宝康

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML左中右div布局

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <title>Document</title> <style type="text/css"> *{ margin: 0;padding: 0 } #wrap{ ...
复制链接

扫一扫