三種方法實現CSS三欄佈局

騰訊雲加社群發表於2019-02-13
CSS

本文由雲+社群發表

作者：前端林子

本文會分別介紹三種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佈局時，要把中間欄放在左欄、右欄後面，左欄和右欄的順序不定

實現的效果如下：

img
自身浮動實現三欄佈局

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佈局時，要把中間欄放在第一個

此方法是實現聖盃佈局和雙飛翼佈局的基礎。

實現的效果如下：

img
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>
複製程式碼

實現的效果如下：

img

此文已由騰訊雲+社群在各渠道釋出

獲取更多新鮮技術乾貨，可以關注我們騰訊雲技術社群-雲加社群官方號及知乎機構號

相關文章