三種方法實現CSS三欄布局

本文由雲+社群發表

本文會分別介紹三種css實現三欄布局的方法，可在瀏覽器中開啟檢視效果

實現方法：需要左欄向左浮動，右欄向右浮動，中間設左右margin來撐開距離

lang="en">
charset="utf-8">
css實現三欄布局1title>
type="text/css">
body
.left
.middle
.right
style>
head>
class="left">左欄div>
class="right">右欄div>
class="middle">中間欄div>
body>
html>
複製**

注意：該方法在html布局時，要把中間欄放在左欄、右欄後面，左欄和右欄的順序不定

自身浮動實現三欄布局

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

lang="en">
charset="utf-8">
css實現三欄布局2title>
type="text/css">
body
.left
.middle
.right
style>
head>
class="middle">中間欄div>
class="left">左欄div>
class="right">右欄div>
body>
html>
複製**

注意：該方法在html布局時，要把中間欄放在第乙個

實現的效果如下：

margin負值法實現三欄布局

實現方法：左欄、右欄絕對定位，分別固定到頁面左右兩側，中間欄不設寬度，用左右margin來撐開距離

lang="en">
charset="utf-8">
css實現三欄布局3title>
type="text/css">
body
.left
.middle
.right
style>
head>
class="left">左欄div>
class="middle">中間欄div>
class="right">右欄div>
body>
html>
複製**

三種方法實現CSS三欄布局

本文由雲 社群發表 本文會分別介紹三種css實現三欄布局的方法，可在瀏覽器中開啟檢視效果 實現方法 需要左欄向左浮動，右欄向右浮動，中間設左右margin來撐開距離 doctype html en utf 8 css實現三欄布局1 title text css body left middle ri...

三種方法實現CSS三欄布局

本文由雲 社群發表本文會分別介紹三種css實現三欄布局的方法，可在瀏覽器中開啟檢視效果 實現方法 需要左欄向左浮動，右欄向右浮動，中間設左右margin來撐開距離 左欄 右欄中間欄 注意 該方法在html布局時，要把中間欄放在左欄 右欄後面，左欄和右欄的順序不定實現的效果如下 實現方法 兩邊兩欄寬度...

三種方法實現CSS三欄布局

本文由雲 社群發表本文會分別介紹三種css實現三欄布局的方法，可在瀏覽器中開啟檢視效果 實現方法 需要左欄向左浮動，右欄向右浮動，中間設左右margin來撐開距離 左欄 右欄中間欄 注意 該方法在html布局時，要把中間欄放在左欄 右欄後面，左欄和右欄的順序不定實現的效果如下 實現方法 兩邊兩欄寬度...