HTML&CSS三列布局

最新推荐文章于 2025-06-11 08:30:00 发布

六月u6

最新推荐文章于 2025-06-11 08:30:00 发布

阅读量1w

点赞数 4

CC 4.0 BY-SA版权

分类专栏：前端定位 position 布局文章标签：基础 html 三列布局

本文链接：https://blog.youkuaiyun.com/u011121046/article/details/51842564

前端同时被 3 个专栏收录

21 篇文章

订阅专栏

定位

2 篇文章

订阅专栏

position

2 篇文章

订阅专栏

本文介绍了HTML和CSS中创建三列布局的三种方法：1) 使用负margin实现，左右列宽度固定，中间列自适应；2) 利用绝对定位调整元素位置；3) 混合布局，先构建一列结构，再通过分割和定位完成三列布局。内容涵盖头、主体和底部的布局设置。

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

1.利用margin值为负数

左右宽度固定中间自适应。补充：background-color填充：content、padding、border。

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/http; charset=utf-8">
		<title>测试页</title>
		<style type="text/css">
		body{
			margin: 0;
			padding: 0;
		}
		.main{
			background-color: black;
			padding:0 300px;
			height: 700px;
		}
		.main-left{
			width: 300px;
			height: 500px;
			background-color: #98FF1A;
			float: left;
			margin-left:-300px;
		}		
		.main-center{
			background-color: #8E8DCC;
			height: 500px;
		}
		.main-right{
			width: 300px;
			height: 500px;
			background-color:#7CC0FF;
			float: right;
			margin-right: -300px;
		}
	
		</style>
	</head>
	<body>
		<div class="main">
			<div class="main-left"></div>
			<div class="main-right"></div>
			<div class="main-center"></div>
		</div>
	</body>
</html>

2.利用绝对定位

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/http; charset=utf-8">
		<title>测试页</title>
		<style type="text/css">
		body{
			margin: 0;
			padding: 0;
		}
		.main{
			background-color: black;
			margin:0 auto;
			height: 700px;
		}
		.main-left{
			width: 300px;
			height: 500px;
			background-color: #98FF1A;
			float: left;
			position: absolute;
			left: 0;
		}		
		.main-center{
			background-color: #8E8DCC;
			height: 500px;
		}
		.main-right{
			width: 300px;
			height: 500px;
			background-color:#7CC0FF;
			float: right;
			position: absolute;
			right: 0;
		}
	
		</style>
	</head>
	<body>
		<div class="main">
			<div class="main-left"></div>
			<div class="main-right"></div>
			<div class="main-center"></div>
		</div>
	</body>
</html>

3.混合布局。

先弄成一列布局的：有head、main和foot。它们都要设置高度、宽度。

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/http; charset=utf-8">
		<title>测试页</title>
		<style type="text/css">
		body{
			margin: 0;
			padding: 0;
		}
		.head{
			height: 80px;
			background-color:black;
		}
		.main{
			height: 500px;
			width: 800px;
			background-color: red;
			margin: 0 auto;
			position: relative;
		}
		.foot{
			height: 100px;
			width:800px;
			background-color:#ddd;
			margin:0 auto;
		}
		
		</style>
	</head>
	<body>
		<div class="head"></div>
		<div class="main">
		</div>
		<div class="foot"></div>
		
	</body>
</html>

然后把main进行分割。

分成两列，宽度都固定，采用绝对定位。一个在左上角，一个在右上角。而main本身要弄成相对定位（如果不弄成相对定位，它的子元素会以body为准进行left、top、right的定位）。

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/http; charset=utf-8">
		<title>测试页</title>
		<style type="text/css">
		body{
			margin: 0;
			padding: 0;
		}
		.head{
			height: 80px;
			background-color:black;
		}
		.main{
			height: 500px;
			width: 800px;
			background-color: red;
			margin: 0 auto;
			position: relative;
		}
		.foot{
			height: 100px;
			width:800px;
			background-color:#ddd;
			margin:0 auto;
		}
		.left{
			width: 200px;
			height: 600px;
			float: left;
			position: absolute;
			top: 0;
			left: 0;
			background-color: #cef;
		}
		.right{
			height: 800px;
			width:600px;
			float: right;
			position: absolute;
			right: 0;
			background-color: orange;
		}
		</style>
	</head>
	<body>
		<div class="head"></div>
		<div class="main">
			<div class="left"></div>
			<div class="right"></div>
		</div>
		<div class="foot"></div>
		
	</body>
</html>

还可以把main的右边再分栏：

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/http; charset=utf-8">
		<title>测试页</title>
		<style type="text/css">
		body{
			margin: 0;
			padding: 0;
		}
		.head{
			height: 80px;
			background-color:black;
		}
		.main{
			height: 500px;
			width: 800px;
			background-color: red;
			margin: 0 auto;
			position: relative;
		}
		.foot{
			height: 100px;
			width:800px;
			background-color:#ddd;
			margin:0 auto;
		}
		.left{
			width: 200px;
			height: 500px;
			float: left;
			position: absolute;
			top: 0;
			left: 0;
			background-color: #cef;
		}
		.right{
			height: 500px;
			width:600px;
			float: right;
			position: absolute;
			right: 0;
			background-color: orange;
		}
		.right-1{
			width: 400px;
			background-color: #0ff;
			float: left;
			height: 500px;
		}
		.right-2{
			width: 200px;
			height: 500px;
			background-color: #ff0;
			float: right;
		}
		</style>
	</head>
	<body>
		<div class="head"></div>
		<div class="main">
			<div class="left"></div>
			<div class="right">
				<div class="right-1"></div>
				<div class="right-2"></div>
			</div>
		</div>
		<div class="foot"></div>
		
	</body>
</html>