兩邊固定中間自適應布局的方法

1.使用彈性布局flex，左右兩邊設定寬度，中間使用flex：1填充；

html部分：

left

center
right

css部分：

#box

#left,#right
#center

2.position定位，左右固定，中間自適應 利用絕對定位

html部分：

left

center
right

css部分：

.container

.left
.center
.right

3.float浮動定位，讓左右元素浮動，缺點是中間元素必須置於二者之後，不然right元素會進入下一行

html部分：

left

right

center

css部分：

.left,.right.left.right.center

4.聖杯布局,父元素設定左右兩邊padding空白給左右兩個子元素，3個子元素全部浮動

html部分：（注意midd寫在前面）

<

div 
id="bd"
>
<
div 
id="middle"
>middle
div>
<
div 
id="left"
>left
div>
<
div 
id="right"
>right
div>
div>

css部分：

#bd#middle#left#right

5.雙飛翼布局

html部分：

<

div 
id="middle"
>
<
div 
id="inside"
>middle
div>
div>
<
div 
id="left"
>left
div>
<
div 
id="right"
>right
div>

css部分：

#middle#left#right

/*給內部div新增margin，把內容放到中間欄，其實整個背景還是100%
*/#inside

經典布局 兩邊固定中間自適應

方法一 左右使用浮動，中間設定margin left和margin right 這種方式很簡單，就是讓左邊的左浮動，右邊的右浮動，然後通過設定中間的margin將內容從兩邊拉回來。例項效果圖.png 如下 我是右邊 我是中間 方法二在container中，我們將middle放在left和right的...

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

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

兩邊固定中間自適應的頁面布局

如上圖所示對頁面進行布局 左右兩部分是固定寬度的，中間黃色的區域可以隨頁面寬度的不同而調整，且與兩邊div有個間距。方法一 浮動 doctype html html head lang en meta charset utf 8 title title style body,div box1 box...