CSS固定布局与流动布局

最新推荐文章于 2025-07-04 12:15:00 发布

shaonian1996

最新推荐文章于 2025-07-04 12:15:00 发布

阅读量7.5k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： html/css

本文链接：https://blog.youkuaiyun.com/qq_41179401/article/details/79323774

本文详细介绍了CSS布局的两种主要方式：固定布局和流动布局。在固定布局中，重点讲述了三栏固定宽度布局的实现，包括如何处理内边距、边框和浮动元素的问题，以及IE6和IE7的兼容性解决方案。而在流动布局部分，介绍了中栏流动布局和CSS3的table-cell方法，讨论了它们的优势和适用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS布局方式

一固定布局：

1 三栏固定宽度：思路先写一栏，再左浮动写第二栏，再左浮动写第三栏。注意：将三栏的总宽度设为960px。所以创建一个总容器。

html代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>布局</title>
	<script type="text/javascript" src="demo.js"></script>
	<link rel="stylesheet" type="text/css" href="demo.css">
</head>
<body>
	<div id="container"><!--总-->
		<nav><!--左导航栏-->
			<ul>
				<li><a href='#'>链接1</a></li>
				<li><a href='#'>链接2</a></li>
				<li><a href='#'>链接3</a></li>
				<li><a href='#'>链接4</a></li>
				<li><a href='#'>链接5</a></li>
				<li><a href='#'>链接6</a></li>
				<li><a href='#'>链接7</a></li>
			</ul>
		</nav>
		<article><!--中间-->
			<p>钱袋子更鼓了！ 去年安徽城镇居民人均可支配收入增长8.5%</p>
			去年，全省城镇常住居民人均可支配收入同比增长8.5%。社会保险费率政策阶段性实施，为企业减负26.8亿元。援企稳岗补贴政策推行，帮助困业缓缴社会保险费18.7亿元，发放稳岗补贴10.3亿元，稳定就业岗位481.4万个。从2016年起，两年来安置去产能分流职工6.2万人。2017年起，实施为期三年的精准帮扶精准就业精准脱贫专项行动计划，支持大别山区等地的扶贫开发工作，帮助13.2万贫困劳动者就业、创业。五年来，全省新增就业人口335万人，共招录公务员3.3万人，培训120万人次。
		</article>
		<aside><!--右边-->
			民生保障网进一步织密,企业退休人员基本养老金连续增加,月人均达到2232元,与五年前相比增长51.6%;城乡居民基础养老金最低标准提高17元:查处工资类案件2700件,清理拖欠农民工工资7.77亿元
	    </aside>
	</div>
</body>
</html>

css代码：

*{	
	margin: 0 ;
	padding: 0;
}
#container{
	width: 960px;
	margin: 0 auto;  
	border:1px solid #ccc;
}
nav{
	width: 150px;
	float: left;
	background: #ccc;
}
nav ul li{
	list-style-type: none;  /*去掉圆点*/
}
article {
	background:#ffed53;
	width: 600px;
	float: left;
}
aside{
	background: #3f7ccf;
	width: 210px;
	float: left;
}

说明：将三栏宽度分别设为150px,600px;210px，保证总宽度为960px不要设置高度;都设为左浮动。

图示：