三列布局——从定位到浮动到圣杯_关于三列布局,定位还是什么-CSDN博客

本文链接：https://blog.csdn.net/CodeR_Designer/article/details/93612070

本文介绍了前端开发中经典的三列布局问题，包括使用定位、浮动以及圣杯布局的实现方法。虽然定位和浮动方案无法满足所有需求，但圣杯布局提供了一种理想的解决方案，确保了中间列的优先加载和内容完整显示。

摘要由CSDN通过智能技术生成

三列布局是很经典的前端布局，今天听网课的时候学会了其中一种解决方案。

首先，三列布局的三个条件是：

1.两边固定当中自适应

2.当中列内容要完整显示

3.当中列要优先加载

1.用定位实现三列布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			body{
				/* 2*left+right */
				min-width: 600px;
			}
			div{
				height: 100px;
			}
			#left,#right{
				width: 200px;
				background-color: deeppink;
			}
			#middle{
				background-color: pink;
				padding: 0 200px;
			}
			#left{
				position: absolute;
				left: 0;
				top: 0;
			}
			#right{
				position: absolute;
				right: 0;
				top: 0;
			}
		</style>
	</head>
	<body style="position: relative;">
		<div id="left">left</div>
		<div id="middle">middle</div>
		<div id="right">right</div>
	</body>
</html>

这种方式没有满足第三个条件：当中列要优先加载。而且这种方式也特别的low。

2.用浮动实现三列布局

贴代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			body{
				min-width: 600px;
			}
			div{
				height: 100px;
			}
			#left,#right{
				width: 200px;
				background-color: deeppink;
			}
			#middle{
				background-color: pink;
			}
			#left{
				float: left;
			}
			#right{
				float: right;
			}
		</style>
	</head>
	<body>
		<div id="left">left</div>
		<div id="right">right</div>
		<div id="middle">middle</div>
	</body>
</html>

这种方式也没有实现第三个条件。这里还有一点，由于left和right的div浮动了，导致其上升了半个层级，div中文字和盒模型各占半个层级，所以middle中的元素自动被挤到了中间。

3.圣杯布局

贴代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			body{
				min-width: 700px;
			}
			#content{
				padding: 0 200px;
			}
			#header,#footer{
				height: 20px;
				text-align: center;
				border: 1px solid deeppink;
				background-color: gray;
			}
			#content .middle{
				float: left;
				width: 100%;
				background: pink;
			}
			#content .left{
				position: relative;
				left: -200px; 
			 	margin-left: -100%; 
				float: left;
				width: 200px;
				background: yellow;
			}
			#content .right{
				position: relative;
				right: -200px; 
				margin-left: -200px;
				float: left;
				width: 200px;
				background: yellow;
			}
			
			
			.clearfix{
				zoom:1px;
			}
			
			.clearfix:after,
			.clearfix:before{
				content: "";
				display: table;
				clear: both;
			}
		</style>
	</head>
	<body>
		<div id="header">header</div>
		<div id="content" class="clearfix">
			<div class="middle"> middle</div>
			<div class="left">left</div>
			<div class="right">right</div>
		</div>
		<div id="footer">footer</div>
	</body>
</html>

这是非常经典的模型，相关的解释可以看这篇：https://www.cnblogs.com/gd-dql/p/7060160.html