css三列布局，中间div固定，两侧div宽度自适应

最新推荐文章于 2021-11-28 12:04:45 发布

啊哈前端

最新推荐文章于 2021-11-28 12:04:45 发布

阅读量733

点赞数

分类专栏： css3

本文链接：https://blog.csdn.net/wuzhe128520/article/details/51296785

版权

css3 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<head>
<title>中间固定,两侧宽度自适应</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>1-3-1一列固定，中间div固定</title>
<meta name="description" content="">
<meta name="keywords" content="">
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
			-moz-box-sizing: border-box;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
		}
		html {
			min-height: 100%;
			_height:100%;
			height:100%;
		}
		body {
			min-height: 100%;
			_height:100%;
			height:100%;
			background: #fff;
			font: 14px 宋体;
		}
		.rounded {
			background: red;
			width: 100%;
		}
		.rounded h2 {
			background: orange;
			padding: 20px 20px 10px;
			margin: 0;
		}
		.rounded .main {
			background: yellow;
			padding: 10px 20px;
			margin: -20px 0 0 0;
		}
		.rounded .footer {
			background: green;
		}
		.rounded .footer p {
			color: red;
			text-align: right;
			background: blue;
			display: block;
			padding: 10px 20px 20px;
			margin: -20px 0 0 0;
			font: 0/0;
		}
		#header,#pagefooter,#container {
			margin: 0 auto;
			width: 85%;
		}
		#naviWrap {
			width: 50%;
			float: left;
			margin-left: -150px;
		}
		#left {
			margin-left: 150px;
		}
		#content {
			float: left;
			width: 300px;
		}
		#content img {
			float: right;
		}
		#sideWrap {
			width: 49.9%;
			float: right;
			margin-right: -150px;
		}
		#side {
			margin-right: 150px;
		}
		#pagefooter {
			clear: both;
		}
	</style>
</head>
<body>
<div id="header">
	<div class="rounded">
		<h2>页头</h2>
		<div class="main">
			<p>锄禾日当午，汗滴禾下土</p>
		</div>
		<div class="footer">
			<p></p>
		</div>
	</div>
</div>
<div id="container">
	<div id="naviWrap">
		<div id="left">
			<div class="rounded">
				<h2>正文</h2>
				<div class="main">
					<p>
						锄禾日当午，汗滴禾下土<br/>
						锄禾日当午，汗滴禾下土
					</p>
					<div class="footer">
						<p>
							查看详细信息>>
						</p>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div id="content">
		<div class="rounded">
			<h2>正文</h2>
			<div class="main">
				<p>
					锄禾日当午，汗滴禾下土
				</p>
			</div>
			<div class="footer">
				<p>
					查看详细信息>>
				</p>
			</div>
		</div>
	</div>

	<div id="sideWrap">
		<div id="side">
			<div class="rounded">
				<h2>正文2</h2>
				<div class="main">
					<p>
						锄禾日当午，汗滴禾下土<br/>
						锄禾日当午，汗滴禾下土
					</p>
				</div>
				<div class="footer">
					<p>
						查看详细信息>>
					</p>
				</div>
			</div>
		</div>
	</div>
</div>
<div id="pagefooter">
	<div class="rounded">
		<h2>页脚</h2>
		<div class="main">
			<p>
				锄禾日当午，汗滴禾下土
			</p>
		</div>
		<div class="footer">
			<p>
			</p>
		</div>
	</div>
</div>
</body>
</html>