網頁布局 左側固定，右側自適應

2022-07-29 07:33:10 字數 3631 閱讀 9484

第一種方法：採用絕對定位+bfc（overflow:auto）

doctype html


>


<


html 


lang


="en"


>


<


head


>


<


meta 


charset


="utf-8"


>


<


title


>document


title


>


<


style


>


*.left


.right


style


>


head


>


<


body


>


<


div 


class


="left"


>左邊


div>


<


div 


class


="right"


>右邊


div>


body


>


html


>
第二種方法：採用左浮動+bfc（overflow:auto）

doctype html


>


<


html 


lang


="en"


>


<


head


>


<


meta 


charset


="utf-8"


>


<


title


>document


title


>


<


style


>


*.left


.right


style


>


head


>


<


body


>


<


div 


class


="left"


>左邊


div>


<


div 


class


="right"


>右邊


div>


body


>


html


>
第三種方法：採用flex布局+bfc（overflow:auto）（推薦使用）

doctype html


>


<


html 


lang


="en"


>


<


head


>


<


meta 


charset


="utf-8"


>


<


title


>document


title


>


<


style


>


*.main


.left


.right


style


>


head


>


<


body


>


<


div 


class


="main"


>


<


div 


class


="left"


>左邊


div>


<


div 


class


="right"


>右邊


div>


div>


body


>


html


>
第四種：table布局（高度會自動撐開）

doctype html


>


<


html 


lang


="en"


>


<


head


>


<


meta 


charset


="utf-8"


>


<


title


>document


title


>


<


style


>


*.main 


.left ,.right 


.right


.left 


style


>


head


>


<


body


>


<


div 


class


="main"


>


<


div 


class


="left"


>左邊


div>


<


div 


class


="right"


>右邊


div>


div>


body


>


html


>
第五種：grid網格布局+bfc(overflow:auto)

doctype html


>


<


html 


lang


="en"


>


<


head


>


<


meta 


charset


="utf-8"


>


<


title


>document


title


>


<


style


>


*.main 


.right


.left 


style


>


head


>


<


body


>


<


div 


class


="main"


>


<


div 


class


="left"


>左邊


div>


<


div 


class


="right"


>右邊


div>


div>


body


>


html


>
如果不觸發bfc，如果右邊內容超出右邊盒子的高度會出現內容往左邊靠和溢位的情況

第一種情況：浮動

第二種情況：絕對定位，flex布局，grid網格布局

html布局,左側固定右側自適應

前幾天看到我們的ui稿，要實現左側固定樹結構，右側自適應。想著自己寫過幾次但是每次都會忘記，在這裡做個筆記。第一種方法 doctype html html lang en head meta charset utf 8 title title title script src script styl...

左側固定 右側自適應

左側浮動，右側margin left值為左側寬即可。由於左側浮動，左側盒子脫標，右側仍在標準文件流，右側盒子寬度是剩下的寬度，效果為右側自適應。右側內容可居中，常規用法即可。需注意的是左側浮動，右側不能繼續浮動。如果兩邊盒子都浮動，由於右側盒子寬度不固定，預設為內容撐開寬度。若浮動，極有可能在第二排...

css布局之左側固定右側自適應布局

1.固定高度 左側固定 右側欄自適應寬度 title style type text css mainbody leftcol rightcol style head body divid mainbody divid leftcol div divid rightcol div div body ...