前端新手上路之css篇(三栏布局)

最新推荐文章于 2024-03-06 14:42:16 发布

小白彡不白

最新推荐文章于 2024-03-06 14:42:16 发布

阅读量171

点赞数

分类专栏： html 和css 文章标签：圣杯布局双飞翼布局

本文链接：https://blog.csdn.net/linglingzi001/article/details/103466480

版权

html 和css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

三栏布局

三列布局要求：

     1.两边固定，中间自适应
     2. 中间列要完整显示		
     3.中间列要优先加载

三列布局

1.两边浮动，中间用margin隔开
浮动会脱离文档流，不能浮到前面的元素上面，所以只能把中间列放在最后

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			.left,
			.center,
			.right {
				height: 500px;
			}
			.left{
				width: 200px;
				background-color: pink;
				float: left;
			}
			.center{
				margin: 0 200px;
				background-color: deeppink;
			}
			.right{
				width: 200px;
				background-color: pink;
				float: right;
			}
			
		</style>
	</head>

	<body>
		<!--三列布局要求
			1.两边固定，中间自适应
			2.中间列要完整显示
			3.中间列要优先加载
		-->
		<div class="left">left</div>
		<div class="right">right</div>
		<div class="center">center</div>
	</body>

</html>

2 绝对定位+margin
原理与浮动类似
因为要优先加载中间列，这两种方法不常用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			.left,
			.center,
			.right {
				height: 500px;
			}
			.left{
				width: 200px;
				background-color: pink;
				position: absolute;
				left: 0;
			}
			.center{
				margin: 0 200px;
				background-color: deeppink;
			}
			.right{
				width: 200px;
				background-color: pink;
				position: absolute;
				right: 0;
			}
			
		</style>
	</head>
	<body>
		<!--三列布局要求
			1.两边固定，中间自适应
			2.中间列要完整显示
			3.中间列要优先加载
		-->
		<div class="left">left</div>
		<div class="right">right</div>
		<div class="center">center</div>
	</body>

</html>

3 经典的圣杯布局和双飞翼布局

圣杯布局用浮动搭建完整的布局框架
用margin设负值调整两边列位置（使三列布局到一行上）
使用相对定位调整两边列的位置（使两列位置调整到两头）

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			.left,
			.center,
			.right {
				height: 500px;
			}
			body{
				min-width: 600px;
			}
			.content{
				padding: 0 200px;
			}
			.left{
				position: relative;
				left: -200px;
				float: left;
				margin-left: -100%;
				width: 200px;
				background-color: pink;
			}
			.center{
				float: left;
				width: 100%;
				background-color: deeppink;
			}
			.right{
				position: relative;
				right: -200px;
				margin-left: -200px;
				float: left;
				width: 200px;
				background-color: pink;
			}
			/*清除浮动*/
			.clearFix:after{ 
				content: "";
				display: block;
				clear: both;
			}
		</style>
	</head>

	<body>
		<!--三列布局要求
			1.两边固定，中间自适应
			2.中间列要完整显示
			3.中间列要优先加载
		-->
		<div class="content clearFix">
			<div class="center">center</div>
			<div class="left">left</div>
			<div class="right">right</div>
					
		</div>
		
	</body>

</html>

双飞翼布局与圣杯布局类似，在中间自适应层多了一层嵌套

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			body{
				min-width: 600px;
			}
			.left,
			.center,
			.right {
				float: left;
				height: 500px;
			}
			
			]
			.content{
				height: 500px;
			}
			.left{
				margin-left: -100%;
				width: 200px;
				background-color: pink;
			}
			
			.right{
				margin-left: -200px;
				width: 200px;
				background-color: pink;
			}

			.center{
				width: 100%;
				background-color: deeppink;
			}
			.center .center-inner{
				padding: 0 200px;
			}
		</style>
	</head>

	<body>
		<!--三列布局要求
			1.两边固定，中间自适应
			2.中间列要完整显示
			3.中间列要优先加载
		-->
		<div class="content">
			
			<div class="center">
				<div class="center-inner">center</div>
			</div>
			<div class="left">left</div>
			<div class="right">right</div>
					
		</div>
		
	</body>

</html>