三种方法实现CSS三栏布局

最新推荐文章于 2023-10-01 20:09:08 发布

前端老道

最新推荐文章于 2023-10-01 20:09:08 发布

阅读量325

点赞数

分类专栏： css布局文章标签： css css3

原文链接：https://cloud.tencent.com/developer/article/1351067

版权

css布局专栏收录该内容

1 篇文章 0 订阅

订阅专栏

“ 关注 前端开发社区 ，回复"1"即可加入 前端技术交流群，回复 "2"即可免费领取 500G前端干货！

作者：前端林子 https://cloud.tencent.com/developer/article/1351067

本文会分别介绍三种CSS实现三栏布局的方法，可在浏览器中打开查看效果

1.方法一：自身浮动的方法

实现方法：需要左栏向左浮动，右栏向右浮动，中间设左右margin来撑开距离

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS实现三栏布局1</title>
	<style type="text/css">
		body{
			margin: 0;
			padding: 0;
		}
		.left{
			width:200px;
			height: 300px;
			background-color: #DC698A;

			float:left;

		}
		.middle{
			/*width:100%;*/
			/*中间栏不要设宽度，包括100%*/
			height: 300px;
			background-color: #8CB08B;

			margin:0 200px;
		}
		.right{
			width: 200px;
			height: 300px;
			background-color: #3EACDD;

			float: right;
		}
	</style>
</head>
<body>
	<!-- 左栏左浮右栏右浮，中间不设宽度用左右margin值撑开距离，且布局中中间栏放最后 -->
	<!-- 中间栏实际宽度是当前屏的100% -->
	<div class="left">左栏</div>
	<div class="right">右栏</div>
	<div class="middle">中间栏</div>
</body>
</html>

注意：该方法在html布局时，要把中间栏放在左栏、右栏后面，左栏和右栏的顺序不定

实现的效果如下：

自身浮动实现三栏布局

2.方法二：margin负值法

实现方法：两边两栏宽度固定，中间栏宽度自适应，左栏、右栏、中间栏向左浮动，左栏的margin-left设为-100%，中间栏的width设为100%，右栏的margin-left设为-右栏宽度

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS实现三栏布局2</title>
	<style type="text/css">
	body{
		margin:0;
		padding:0;
	}
	.left{
		width:200px;
		height: 300px;
		background-color: #DC698A;

		float:left;
		margin-left:-100%;
	}
	.middle{
		width:100%;
		height: 300px;
		background-color: #8CB08B;

		float:left;
	}
	.right{
		width:200px;
		height: 300px;
		background-color: #3EACDD;

		float: left;
		margin-left: -200px;
	}
	</style>
</head>
<body>
	<!-- 左栏中间栏右栏左浮，左栏margin-left：-100%，中间栏宽100%,，右栏margin-left:-右栏宽度 
	且布局上必须中间栏放第一个-->
	<div class="middle">中间栏</div>
	<div class="left">左栏</div>
	<div class="right">右栏</div>
</body>
</html>

注意：该方法在html布局时，要把中间栏放在第一个

此方法是实现圣杯布局和双飞翼布局的基础。

实现的效果如下：

margin负值法实现三栏布局

3.方法三：绝对定位法

实现方法：左栏、右栏绝对定位，分别固定到页面左右两侧，中间栏不设宽度，用左右margin来撑开距离

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS实现三栏布局3</title>
	<style type="text/css">
		body{
			margin:0;
			padding: 0;
		}
		.left{
			width:200px;
			height: 300px;
			background-color: #DC698A;

			position: absolute;
			left:0;
			top:0;
		}
		.middle{
			/*width: 100%;*/
			height: 300px;
			background-color: #8CB08B;
			margin:0 200px;
		}
		.right{
			width:200px;
			height: 300px;
			background-color: #3EACDD;

			position: absolute;
			right:0;
			top:0;
		}
	</style>
</head>
<body>
	<!-- 左右两栏绝对定位，分别固定到页面的左右两侧，中间栏不设宽度，用左右margin撑开距离 -->
	<!-- 中间栏的实际宽度是当前屏的100% -->
	<div class="left">左栏</div>
	<div class="middle">中间栏</div>
	<div class="right">右栏</div>
</body>
</html>

实现的效果如下：

绝对定位法实现三栏布局

最近几天会陆续更新的~~，觉得总结的可以的话，麻烦给小编点一个 在看, 谢谢！

往期：

Vue3 插件开发详解尝鲜版

vue面试题总结(一)

移动端 H5 面试（必问）的12个问题及答案

请各位帅哥美女多多支持帅编，回复“1”即可加入前端技术交流群，回复’2‘即可领取 500G 前端干货

前端老道

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
三种方法实现CSS三栏布局

“ 关注前端开发社区，回复"1"即可加入前端技术交流群，回复 "2"即可免费领取 500G前端干货！本文会分别介绍三种CSS实现三栏布局的方法，可在浏览器中打开查看效果1.方法一：自身浮动的方法实现方法：需要左栏向左浮动，右栏向右浮动，中间设左右margin来撑开距离<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS实现三栏布局1&l
复制链接

扫一扫