css三列布局,最右侧div固定,其他两列自适应

最新推荐文章于 2024-03-22 16:45:09 发布

啊哈前端

最新推荐文章于 2024-03-22 16:45:09 发布

阅读量862

点赞数

分类专栏： css3 文章标签：布局 css布局

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

版权

css3 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<head>
<title>最右边div固定，其他两列宽度自适应</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;
		}
		#header,#pagefooter,#container {
			margin: 0 auto;
			width: 85%;
		}
		#outerWrap {
			float: left;
			width: 100%;
			margin-left: -200px;
		}
		#innerWrap {
			margin-left: 200px;
		}
		#left {
			float: left;
			width: 40%;
		}
		#content {
			float: right;
			width: 59.5%  /*不设置60%，为了防止换行*/
		}
		#content img {
			float: right;
		}
		#side {
			float: right;
			width: 200px;
		}
		#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="outerWrap">
		<div id="innerWrap">
			<div id="left">
				<div class="rounded">
					<h2>正文</h2>
					 <div class="main">
						 <p>
							 锄禾日当午，汗滴禾下土<br/>
							 锄禾日当午，汗滴禾下土
						 </p>
						 <div class="footer">
							 <p>
								 查看详细信息>>
							 </p>
						 </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>
	</div>
	<div id="side">
		<div class="round">
			<h2>正文2</h2>
			<div class="main">
				<p>
					锄禾日当午，汗滴禾下土<br/>
					锄禾日当午，汗滴禾下土
				</p>
			</div>
			<div class="footer">
				<p>
					查看详细信息>>
				</p>
			</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>

啊哈前端

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
css三列布局,最右侧div固定,其他两列自适应

*{ margin: 0; padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } html { min-height
复制链接

扫一扫