CSS 倆邊固定中間自適應 4種方法

倆邊固定中間自適應

1、float

2、flex布局

3、position絕對定位

4、calc計算函式(移動端慎用)

推薦使用 1 2 3 種方法

第一種：float;

html

="screenbox"

>
="left"
>
<
/div>
="right"
>
<
/div>
<
!--如果使用float布局的話，中間的容器必須必須必須放到最後！！！--
>
="center"
>中間的box,中間的box,中間的box,中間的box,中間的box,中間的box,中間的box,中間的box,中間的box,中間的box,中間的box,中間的box,中間的box,中間的box,中間的box,中間的box,中間的box,中間的box,
<
/div>
<
/div>css
.screenbox 
.left,
.right 
.left 
.right 
.center 

第二種：flex布局

html

="screenbox"

>
="left"
>
<
/div>
="center"
>中間的box,中間的box,中間的box,中間的box,中間的box,中間的box,中間的box,中間的box,中間的box,中間的box,中間的box,中間的box,中間的box,中間的box,中間的box,中間的box,中間的box,中間的box,
<
/div>
="right"
>
<
/div>
<
/div>css
.screenbox 
.left,
.right 
.center 

第三種：position絕對定位

html

="screenbox"

>
="left"
>
<
/div>
="center"
>中間的box,中間的box,中間的box,中間的box,中間的box,中間的box,中間的box,中間的box,中間的box,中間的box,中間的box,中間的box,中間的box,中間的box,中間的box,中間的box,中間的box,中間的box,
<
/div>
="right"
>
<
/div>
<
/div>css
.screenbox 
.left 
.center 
.right 

第四種：calc計算函式

calc() 函式用於動態計算長度值。

運算子前後都需要保留乙個空格;

任何長度值都可以使用calc()函式進行計算;

calc()函式支援 「+」, 「-」, 「*」, 「/」 運算;

calc()函式使用標準的數**算優先順序規則;

="screenbox"

>
="left"
>
<
/div>
="center"
>
中間的box,中間的box,中間的box,中間的box,中間的box,中間的box,中間的box,中間的box,中間的box,中間的box,中間的box,中間的box,中間的box,中間的box,中間的box,中間的box,中間的box,中間的box,中間的box,中間的box,中間的box,中間的box,中間的box,中間的box,
<
/div>
="right"
>
<
/div>
<
/div>css
.screenbox 
.left 
.center 
.right 

完！

css實現兩邊固定，中間自適應

經常有需求，所以就總結一下，有需要的時候直接複製貼上啦 布局的原理是margin負值法。首先需要在center元素外部包含乙個div，包含div需要設定float屬性使其形成乙個bfc，並設定寬度，並且這個寬度要和left塊的margin負值進行配合，具體原理參考這裡。這裡對聖杯布局解釋特別詳細。h...

css 兩邊固定，中間自適應布局

參考 相同點 利用布局，可優先渲染主要部分 不同點 聖杯布局 借助的是其他非主要元素覆蓋了其父元素的padding值所佔據的寬度，同乙個杯子，非主要元素其只是佔據了全部容器的padding值部分 雙飛翼布局 給主要部分main wrap新增乙個外層元素main，其他非主要元素所佔據的空間是主要部分 ...

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

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