前端面試頁面布局 五種三欄布局的實現即其優缺點

浮動布局

問題：

優點：

html

class

="layout float"
>
class
="left-right-center"
>
class
="left"
>
div>
class
="right"
>
div>
class
="center"
>
>
浮動解決方案h1
>
1.這是三欄布局的中間部分
1.這是三欄布局的中間部分
1.這是三欄布局的中間部分
div>
article
>
section
>
css
.layout article div
/* 浮動布局********** start***************==== */
.layout.float .left
.layout.float .right
.layout.float .center

問題：

優點：

html

class

="layout absolute"
>
class
="left-right-center"
>
class
="left"
>
div>
class
="center"
>
>
絕對定位方案h1
>
1.這是三欄布局的中間部分
1.這是三欄布局的中間部分
1.這是三欄布局的中間部分
div>
class
="right"
>
div>
article
>
section
>
css
.layout.absolute .left-right-center>div
.layout.absolute .left
.layout.absolute .center
.layout.absolute .right

問題：

優點：

html

class

="layout flexbox"
>
class
="left-right-center"
>
class
="left"
>
div>
class
="center"
>
>
彈性布局方案h1
>
1.這是三欄布局的中間部分
1.這是三欄布局的中間部分
1.這是三欄布局的中間部分
div>
class
="right"
>
div>
article
>
section
>
css
.layout.flexbox .left-right-center
.layout.flexbox .left
.layout.flexbox .center
.layout.flexbox .right

問題：

優點：

html

class

="layout table"
>
class
="left-right-center"
>
class
="left"
>
div>
class
="center"
>
>
**布局方案h1
>
1.這是三欄布局的中間部分
1.這是三欄布局的中間部分
1.這是三欄布局的中間部分
div>
class
="right"
>
div>
article
>
section
>
css
.layout.table .left-right-center
.layout.table .left-right-center>div
.layout.table .left
.layout.table .center
.layout.table .right

問題：

emmmm基本沒有…

優點：

可以做複雜的事，同時**量也不多,是新技術

html

class

="layout grid"
>
class
="left-right-center"
>
class
="left"
>
div>
class
="center"
>
>
網格布局方案h1
>
1.這是三欄布局的中間部分
1.這是三欄布局的中間部分
1.這是三欄布局的中間部分
div>
class
="right"
>
div>
article
>
section
>
css
.layout.grid .left-right-center
.layout.grid .left
.layout.grid .center
.layout.grid .right

個人推薦使用

具體還需結合實際情況使用

當然還有其他的布局方式，就靠大家自己探索了~

頁面布局（三欄布局）

假設高度已知，請寫出三欄布局，其中左欄 右欄寬度各為300px，中間自適應。1.浮動布局 2.絕對定位 3.flexbox解決 4.table cell 布局 5.grid網格布局。doctype html en utf 8 viewport content width device width,i...

前端面試 01 頁面布局

3.延伸 5種方法對比 4.總結 問題 假設高度預設100px 請寫出三欄布局，其中左欄 右欄各為300px，中間自適應。方法 class layout float class left right center class left 我是 left div class right 我是 right...

頁面布局之三欄布局的5種方案

題目 假設高度已知，請寫出三欄布局，其中左欄 右欄寬度各為300px，中間自適應的設定方案有幾種？這裡考察的是你對css的理解 首先初始化樣式bodyhtml編寫 由於三欄布局html 幾乎差不多，下面就不過多重複編寫了。這是三欄布局左右固定中間自適應 注 浮動解決方案需要將.center的類標籤與...