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

2022-05-05 10:57:22 字數 2362 閱讀 7265

題目：

假設高度已知，請寫出三欄布局，其中左欄、右欄寬度各為300px，中間自適應的設定方案有幾種？

這裡考察的是你對css的理解

首先初始化樣式
body
html編寫

由於三欄布局html**幾乎差不多，下面就不過多重複編寫了。



這是三欄布局左右固定中間自適應
注：浮動解決方案需要將.center的類標籤與.right類互換即可。

下面我們將通過修改css樣式來解決布局方案，樣式的container1可根據下面方案自行修改即可。

.container1 div


.container1 .left,


.container1 .right


.container1 .left


.container1 .right


.container1 .center
優點：相容性比較好；把清除浮動和周邊元素的關係處理好的話。

**缺點： **清除浮動，浮動以後脫離文件流，處理不好會帶來很多問題，本身的侷限性。

.container2


.container2 div


.container2 .left,


.container2 .right


.container2 .center


.container2 .left


.container2 .right
優點：快捷，配合js使用不容易出問題。

缺點：布局已經脫離文件流了，就意味下面所有子元素也必須脫離文件流，導致了這個方案的可使用性比較差。

.container3


.container3 div


.container3 .left,


.container3 .right


.container3 .center
優點：解決了上面兩個方案的不足

缺點：ie8及以下不支援 flex

.container4


.container4 div


.container4 .left,


.container4 .right


.container4 .center
優點：輕易的做到，**相容性非常好，flex解決不了的（ie8不支援flex），想實現同樣效果可以用**。

缺點：歷史的詬病以外，其中某乙個單元格的高度超出了的時候，兩側的單元格也是要調整高度的；有時候的場景是不需要同時增高的。

.container5


.container5 div


.container5 .left,


.container5 .right


.container5 .center
優點：可以做很多複雜的布局，**量也簡化很多，是未來的趨勢；

缺點：相容性問題，各種瀏覽器及舊版本支援不是很好。

在業務中的方案根據上面的優缺點來應對需求使用相應的布局方案。筆者考慮到相容性及其他因素在這裡推薦flex和table倆種方案。

看了上面那麼多方案，是否自己也可以手動實現一下三欄上下高度固定，中間自適應

上


下
css樣式

.three_columns


.three_columns .top,


.three_columns .bottom


.three_columns .middle
實現倆欄布局,右邊固定,左邊自適應



這是倆欄布局,右邊固定,左邊自適應
css樣式

.two-column


.two-column div


.two-column .right


.two-column .left
總結：語義化標籤對seo更友好。**書寫的規範方便後期的維護。

如果你覺得該文章能幫助到你，這裡歡迎star小星星。

頁面布局方法之三欄布局

題目 完成左中右三欄布局，高度100px，左右寬度200px，中間寬度自適應。今天學習了關於三欄布局的五種方法，其中最常用的就是flex伸縮布局，其他的布局方法雖然也可以實現同樣的效果，但是或多或少有些缺點，但是本著多學點總是沒錯的精神，還是都了解一下。float浮動布局的優點是相容性比較好，但是其...

頁面布局（三欄布局）

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

CSS之三欄布局

方法一 浮動布局 width 100 height 100px float left width 300px background red height 100px float right background blue width 300px height 100px background yel...