三種方法實現CSS三欄布局

本文由雲+社群發表

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

<

!doctype html>
"en"
>
"utf-8"
>
css實現三欄布局1
<
/title>
"text/css"
>
body
.left
.middle
.right
<
/style>
<
/head>
<
!-- 左欄左浮右欄右浮，中間不設寬度用左右margin值撐開距離，且布局中中間欄放最後 --
>
<
!-- 中間欄實際寬度是當前屏的100%--
>
="left"
>左欄<
/div>
="right"
>右欄<
/div>
="middle"
>中間欄<
/div>
<
/body>
<
/html>

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

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

<

!doctype html>
"en"
>
"utf-8"
>
css實現三欄布局2
<
/title>
"text/css"
>
body
.left
.middle
.right
<
/style>
<
/head>
<
!-- 左欄中間欄右欄左浮，左欄margin-left：-
100%，中間欄寬100
%,，右欄margin-left:
-右欄寬度 
且布局上必須中間欄放第乙個--
>
="middle"
>中間欄<
/div>
="left"
>左欄<
/div>
="right"
>右欄<
/div>
<
/body>
<
/html>

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

實現的效果如下：

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

<

!doctype html>
"en"
>
"utf-8"
>
css實現三欄布局3
<
/title>
"text/css"
>
body
.left
.middle
.right
<
/style>
<
/head>
<
!-- 左右兩欄絕對定位，分別固定到頁面的左右兩側，中間欄不設寬度，用左右margin撐開距離 --
>
<
!-- 中間欄的實際寬度是當前屏的100%--
>
="left"
>左欄<
/div>
="middle"
>中間欄<
/div>
="right"
>右欄<
/div>
<
/body>
<
/html>

三種方法實現CSS三欄布局

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

三種方法實現CSS三欄布局

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

三種方法實現CSS三欄布局

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