兩邊寬度固定，中間寬度自適應的幾種布局方法

2021-09-19 14:24:34 字數 915 閱讀 1699

我們在用css設定頁面布局的時，歸根結底是要讓頁面中的塊按照我們的需求進行排列組合。以下是幾種常用的中間自適應，兩邊固定的布局方法。

核心：將父元素設定為彈性盒布局：display:flex;

html**：
css**：

#father


#son1


#son2


#son3
父元素不設定定位，三列子元素都設定為左浮動。

自適應的那一列寬度用計算得出：calc(100vw（100%視窗寬度） - 左邊寬度 - 右邊寬度)。

html**：
css**：

#dad


#left


#center


#right
核心：將父元素設定為position:relative；（相對定位）

子元素設定為絕對定位position:absolute；

左邊列(固定寬度)：position:absolute; left:0;

中間列（自適應列）:position:absolute; left:(左邊列的寬度);right:(右邊列的寬度)

右邊列（固定寬度）：position:absolute;right:0;

html**：



右absolute寬固定
css**：

#third


#thirdone


#thirdtwo


#thirdthree

css中間固定寬度，兩邊自適應寬度

html5 css main1 left1,right1 left1 inner,right1 inner 借助於負的margin來實現的，首先我們在中間列定好固定值，因為此值是不會在改變的，接著對其進行左浮動 那麼關鍵地主是在左右邊欄設定地方，這種方法是將其都進行50 的寬度設定，並加上中負的左邊...

實現左右兩邊固定寬度，中間自適應的布局的幾種方法

請移步flex筆記 左右兩邊設定absolute，分別設定left為0 right為0，設定寬度，中間部分只需設定左右的margin即可。12 3 grid網格布局實現非常簡單，只需幾行 12 3 left middle right 1 float布局使用的時候一定要注意清除浮動。2 positio...

實現左右兩邊固定寬度，中間自適應的布局

廢話不多說，上 方法一 float解決方案 float解決方案 float解決方案 float解決方案 方法二 絕對定位position解決方案 position解決方案 position解決方案 position解決方案 方法三 flex解決方案 flexbox解決方案 flexbox解決方案 f...