常用的有三種方式：
1、絕對定位法（最易理解）
左右兩欄採用絕對定位，分別固定於頁面的左右兩側，中間的主體欄用左右margin值撐開距離。於是實現了三欄自適應布局。
1<
html
>23
<
head
>45
<
title
>三欄自適應布局
title
>67
<
style
type
="text/css"
>89
html,body
1617
#left,#right
2829
#left
3637
#right
4445
#main
5455
style
>
5657
head
>
5859
<
body
>
6061
<
div
id="left"
>
div>
6263
<
div
id="main"
>
div>
6465
<
div
id="right"
>
div>
6667
body
>
6869
html
>
2、margin負值法（不易理解）
1html,body
2#main
3#main #body
4#left,#right
5#left
6#right78
<
div
id=」main」
>
9<
div
id=」body」
>
div>
10div
>
11<
div
id=」left」
>
div>
12<
div
id=」right」
>
div>
重點是第乙個div是中間的main，且必須套乙個容器。
3、浮動法（最常見）
1<
html
>
2<
head
>
3<
title
>三欄自適應布局
title
>
4<
style
type
="text/css"
>
5html,body
9#main
14#left,#right
19#left
22#right
25style
>
26head
>
27<
body
>
28<
div
id="left"
>
div>
29<
div
id="right"
>
div>
30<
div
id="main"
>
div>
31body
>
32html
>
重點是中間的
main
要放在標籤最後，缺點是需要用
clear:both
。
三欄布局 自適應
趴趴熊，我們走 個人簡介，是當事人全面而簡潔地介紹自身情況的一種書面表達方式。求職過程中撰寫的個人簡介是求職者向欲供職單位全面 簡潔 條理清晰地自我介紹 自我推薦的文書。簡介是應用寫作學研究的一種日常應用文體。p 個人簡介，是當事人全面而簡潔地介紹自身情況的一種書面表達方式。求職過程中撰寫的個人簡介...
三欄自適應布局
實現左中右三欄布局，左右為固定寬度，中間寬度隨父元素寬度變化 父元素設定display flex 左右盒子寬度固定，中間盒子設定flex 1 container left center right style class container class left div class center d...
三欄布局 自適應
趴趴熊，我們走 個人簡介，是當事人全面而簡潔地介紹自身情況的一種書面表達方式。求職過程中撰寫的個人簡介是求職者向欲供職單位全面 簡潔 條理清晰地自我介紹 自我推薦的文書。簡介是應用寫作學研究的一種日常應用文體。p 個人簡介，是當事人全面而簡潔地介紹自身情況的一種書面表達方式。求職過程中撰寫的個人簡介...