三種方法實現CSS三欄佈局

時間 2019-11-17

標籤三種方法實現 css 佈局欄目 CSS 简体版

原文原文鏈接

本文由雲+社區發表css

做者：前端林子html

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

實現的效果以下：spa

自身浮動實現三欄佈局

2.方法二：margin負值法

實現方法：兩邊兩欄寬度固定，中間欄寬度自適應，左欄、右欄、中間欄向左浮動，左欄的margin-left設爲-100%，中間欄的width設爲100%，右欄的margin-left設爲-右欄寬度code

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

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

實現的效果以下：htm

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> 複製代碼