本文由雲+社區發表
作者：前端林子
本文會分別介紹三種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>
實現的效果如下：
此文已由騰訊雲+社區在各渠道發布
獲取更多新鮮技術干貨，可以關注我們騰訊雲技術社區-雲加社區官方號及知乎機構號