四种方法实现三列布局，中间自适应，两边固定宽度

最新推荐文章于 2022-07-22 09:05:20 发布

晨小点的小疯子

最新推荐文章于 2022-07-22 09:05:20 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML CSS 文章标签：三栏布局

本文链接：https://blog.youkuaiyun.com/chenqiurui1994/article/details/80042312

CSS 同时被 2 个专栏收录

3 篇文章

订阅专栏

HTML

2 篇文章

订阅专栏

本文介绍了使用圣杯布局方法来创建三列布局，其中中间部分宽度自适应，两侧保持固定宽度。这种布局技术在网页设计中常见，能有效解决内容区域与侧边栏的显示问题。

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

1、圣杯布局

<!DOCTYPE html>
<html>
<head>
	<title>圣杯布局</title>
	<meta charset="utf-8">
	<style type="text/css">
		/*圣杯布局*/
		.container{
			/*为左右盒子留出位置*/
			padding: 0 300px 0 200px;
		}
		.left,.middle,.right{
			min-height: 130px;
			float: left;
			position: relative;
		}
		.left{
			background: green;
			width: 200px;
			/*负边距让左右盒子移到和中间盒子同行，-100%表示左移一行的大小*/
			margin-left: -100%;
			/*负值实现反方向移动，即向左移动填充padding-left*/
			left: -200px;
		}
		.middle{
			background-color: blue;
			/*单独占满一行*/
			width: 100%;
			height: 1600px;
		}
		.right{
			background-color: red;
			width: 300px;
			/*负边距让左右盒子移到和中间盒子同行*/
			margin-left: -300px;
			/*负值实现反方向移动，即向右移动填充padding-right*/
			right: -300px;
		}
	</style>
</head>
<body>

<!-- 圣杯布局 -->
<div class="container">
	<!-- 中间的div必须写在最前面,优先加载 -->
	<div class="middle">中间弹性区</div>
	<div class="left">左边栏</div>
	<div class="right">右边栏</div>
</div>
</body>
</html>

2、双飞翼布局

<!DOCTYPE html>
<html>
<head>
	<title>双飞翼布局</title>
	<meta charset="utf-8">
	<style type="text/css">
		.left,.middle,.right{
			min-height: 130px;
			float: left;
		}
		.left{
			background-color: red;
			width: 200px;
			margin-left: -100%;
		}
		.middle{
			background-color: gray;
			width: 100%;
		}
		.right{
			background-color: darkblue;
			width: 300px;
			margin-left: -300px;
		}
		.content{
			margin: 0 300px 0 200px;
			background-color: orange;
		}
	</style>
</head>
<body>
<div class="middle">
	<div class="content">middle</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</body>
</html>

3、flex布局

<!DOCTYPE html>
<html>
<head>
	<title>flex实现三栏布局</title>
	<meta charset="utf-8">
	<style type="text/css">
		.container{
			min-height: 130px;
			display: flex;
		}
		.middle{
			background-color: rgba(0,0,255,0.7);
			/*flex-grow 默认为0 放大比例，填充空白，*/
			flex-grow:1;
			
		}
		.left{
			background-color: rgba(0,255,0,0.7);
			/*order默认为0，越小越靠前*/
			order: -1;
			/*项目占据主轴的空间*/
			flex-basis: 200px;
		}
		.right{
			background-color: rgba(255,0,0,0.7);
			/*项目占据主轴的空间*/
			flex-basis: 300px;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="middle">middle</div>
		<div class="left">left</div>
		<div class="right">right</div>
	</div>
</body>
</html>

4、绝对定位

<!DOCTYPE html>
<html>
<head>
	<title>绝对定位实现三栏布局</title>
	<meta charset="utf-8">
	<style type="text/css">
		.container{
			position: relative;
		}
		.middle,.left,.right{
			top: 0;
			height: 130px;

		}
		.middle{
			background-color: red;
			height: 500px;
			margin: 0 300px 0 200px;
		}
		.left{
			background-color: blue;
			width: 200px;
			position: absolute;
			left: 0;
		}
		.right{
			background-color: green;
			width: 300px;
			position: absolute;
			right: 0;
		}
	</style>
</head>
<body>
<div class="container">
	<!-- 中间的div必须写在最前面,优先加载 -->
	<div class="middle">中间弹性区</div>
	<div class="left">左边栏</div>
	<div class="right">右边栏</div>
</div>
</body>
</html>