【CSS学习总结】两边宽度固定，中间宽度自适应的布局方法

本文链接：https://blog.csdn.net/xiamocsdn/article/details/90447700

本文介绍了四种CSS三栏布局的实现方法，包括圣杯布局，利用左浮动、负边距和相对定位；双飞翼布局，使用左浮动和负边距；弹性布局，通过设置父元素为弹性盒和子元素排列顺序；以及两边绝对定位，中间自适应宽度的布局方式。

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

一、圣杯布局（左浮动、负边距、相对定位）

中间列的三栏float布局，中间栏放在文档流前面保证最先加载。关键在于如何使中间列的内容不被遮挡。

父元素盒container设置padding值；三个子元素都浮动float:left
center中间栏设置width:100%;
left左边栏设置margin-left:-100%(移动到容器内的最左边);position:relative; left:-宽度值(移动到容器左边padding预留出来的位置)
right右边设置margin-left:-宽度值;position:relative; right:-宽度值
圣杯布局用到了浮动、负边距、相对定位；

<!DOCTYPE html>
<html>
<head>
	<title>圣杯布局-双飞翼布局</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="圣杯布局.css">
</head>
<body>
	<div id="header">header</div>
	<div id="container">
		<div id="center">center</div>
		<div id="left">left</div>
		<div id="right">right</div>
	</div>
	<div id="footer">footer</div>
</body>
</html>

*{
	margin: 0;
	padding: 0;
}
#header{
	height: 50px;
	text-align: center;
	background-color: lightblue;
}
#container{
	padding: 0 200px;/*左右栏通过margin到了正确位置，这行代码保证了中间栏的位置*/
	height: 100px; 
	text-align: center;
}
#center{
	float: left;
	width: 100%;
	height: 100px;
	background-color: pink;
}
#left{
	float: left;
	position: relative;
	left: -200px;
	margin-left: -100%;
	width: 200px;
	height: 100px;
	background-color: blue;
}
#right{
	float: left;
	position: relative;
	right: -200px;
	margin-left: -200px;
	width: 200px;
	height: 100px;
	background-color: green;
}
#footer{
	height: 50px;
	width: 100%;
	text-align: center;
	background-color: lightgreen;
}

二、双飞翼布局（左浮动、负边距.双飞翼布局的下一个元素需要清除浮动）

两边宽度固定，中间宽度自适应。三列float:left;
中间栏宽度100%，在中间栏的div里面再嵌套一个div，对嵌套的div设置margin-left和margin-right。

中间栏center内嵌一个inside。center宽度100%；inside设置margin值预留左右两栏位置；
左边栏left设置margin-left:100%;
右边栏设置margin-left : -右边宽度值;
双飞翼布局用到了左浮动、负边距

<!DOCTYPE html>
<html>
<head>
	<title>双飞翼布局</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="双飞翼布局.css">
</head>
<body>
	<div id="header">header</div>
	<div id="middle">
		<div id="inside">inside</div>
	</div>
	<div id="left">left</div>
	<div id="right">right</div>
	<div id="footer">footer</div>
</body>
</html>

*{
	margin: 0;
	padding: 0;
}
#header{
	width: 100%;
	height: 50px;
	text-align: center;
	background-color: orange;
}
#middle{
	float: left;
	height: 200px;
	width: 100%;
	text-align: center;
	background-color: red;
}
#inside{
	margin: 0 200px;
	height: 100%;
	text-align: center;
	background-color: green

}
#left{
	float: left;
	width: 200px;
	height: 200px;
	margin-left: -100%;
	text-align: center;
	background-color: yellow;
}
#right{
	float: left;
	width: 200px;
	height: 200px;
	margin-left: -200px; 
	text-align: center;
	background-color: lightblue;
}
#footer{
	float: left;
	width: 100%;
	height: 50px;
	text-align: center;
	background-color: blue;
}

三、弹性布局【flex】

父元素设置为弹性盒，并且flex-wrap:nowrap(不换行)
子元素设置排列顺序（order，数值越小排列越靠前）
中间栏设置（flex:1，表示填充满剩余位置）

<!DOCTYPE html>
<html>
<head>
	<title>弹性盒布局</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="flex布局.css">
</head>
<body>
	<div id="header">header</div>
	<div id="container">
		<div id="center">center</div>
		<div id="left">left</div>
		<div id="right">right</div>
	</div>
	<div id="footer">footer</div>
</body>
</html>

*{
	margin: 0;
	padding: 0;
}
#header{
	height: 100px;
	text-align: center;
	background-color: blue;
}
#container{
	display: flex;/*中间弹性盒布局*/
	flex-wrap: nowrap;/*排列不下时不换行*/
	height: 200px;
	text-align: center;
	background-color: pink;
}
#center{
	order: 1;/*order定义item的排列顺序，默认为0，越小越靠前。left为0，center为1，right为2*/
	flex: 1;/*填充满剩余位置*/
	height: 200px;
	background-color: orange;
}
#left{
	order: 0;/*order定义item的排列顺序，默认为0，越小越靠前。left为0，center为1，right为2*/
	height: 200px;
	width: 200px;
	background-color: green;
}
#right{
	order: 2;/*order定义item的排列顺序，默认为0，越小越靠前。left为0，center为1，right为2*/
	height: 200px;
	width: 200px;
	background-color: lightblue;
}
#footer{
	height: 100px;
	text-align: center;
	background-color: yellow;
}

四、两边绝对定位，中间100%宽度（父相子绝）

父元素相对定位relative，子元素三列左右两栏绝对定位absolute，设置left/right为0，top为0；中间一栏自适应，设置margin：0 左右宽度px;

<!DOCTYPE html>
<html>
<head>
	<title>两边绝对定位，中间100%</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="绝对定位-中间100%.css">
</head>
<body>
	<div id="header">header</div>
	<div id="container">
		<div id="center">center</div>
		<div id="left">left</div>
		<div id="right">right</div>
	</div>
	<div id="footer">footer</div>
</body>
</html>

*{
	margin: 0;
	padding: 0;
}
#header{
	height: 50px;
	width: 100%;
	text-align: center;
	background-color: blue;
}
#container{
	position: relative;
	text-align: center;
	background-color: green;
}
#center{
	height: 200px;
	margin: 0 200px;
	background-color: red
}
#left{
	position: absolute;
	left: 0;
	top: 0;
	height: 200px;
	width: 200px;
	background-color: pink;
}
#right{
	position: absolute;
	right: 0;
	top: 0;
	height: 200px;
	width: 200px;
	background-color: orange;
}
#footer{
	width: 100%;
	height: 50px;
	text-align: center;
	background-color: blue;
}