如上圖所示對頁面進行布局
左右兩部分是固定寬度的，中間黃色的區域可以隨頁面寬度的不同而調整，且與兩邊div有個間距。
方法一：浮動
doctype html元素只能影響後面的浮動元素的位置，對前面的沒有影響，所以box1、box2左右浮動後位置就固定了，然後加入的box3因為有高度，所以寬度會自適應。>
<
html
>
<
head
lang
="en"
>
<
meta
charset
="utf-8"
>
<
title
>
title
>
<
style
>
body,div
.box1
.box3
.box2
style
>
head
>
<
body
>
<
div
class
="box1"
>
div>
<
div
class
="box2"
>
div>
<
div
class
="box3"
>
div>
body
>
html
>
方法二：中間定位
doctype html附：元素居中的方法：>
<
html
>
<
head
lang
="en"
>
<
meta
charset
="utf-8"
>
<
title
>
title
>
<
style
>
body,div
.box1
.box2
.box3
style
>
head
>
<
body
>
<
div
class
="box1"
>
div>
<
div
class
="box2"
>
div>
<
div
class
="box3"
>
div>
body
>
html
>
方法三：兩邊定位
doctype html方法四：彈性盒模型>
<
html
>
<
head
lang
="en"
>
<
meta
charset
="utf-8"
>
<
title
>
title
>
<
style
>
body,div
.box1
.box2
.box3
style
>
head
>
<
body
>
<
div
class
="box1"
>
div>
<
div
class
="box2"
>
div>
<
div
class
="box3"
>
div>
body
>
html
>
doctype html>
<
html
>
<
head
lang
="en"
>
<
meta
charset
="utf-8"
>
<
title
>
title
>
<
style
>
body,div
body
.box1
.box2
.box3
style
>
head
>
<
body
>
<
div
class
="box1"
>
div>
<
div
class
="box3"
>
div>
<
div
class
="box2"
>
div>
body
>
html
>
經典布局 兩邊固定中間自適應
方法一 左右使用浮動，中間設定margin left和margin right 這種方式很簡單，就是讓左邊的左浮動，右邊的右浮動，然後通過設定中間的margin將內容從兩邊拉回來。例項效果圖.png 如下 我是右邊 我是中間 方法二在container中，我們將middle放在left和right的...
css 兩邊固定，中間自適應布局
參考 相同點 利用布局，可優先渲染主要部分 不同點 聖杯布局 借助的是其他非主要元素覆蓋了其父元素的padding值所佔據的寬度，同乙個杯子，非主要元素其只是佔據了全部容器的padding值部分 雙飛翼布局 給主要部分main wrap新增乙個外層元素main，其他非主要元素所佔據的空間是主要部分 ...
兩邊固定中間自適應布局的方法
1.使用彈性布局flex，左右兩邊設定寬度，中間使用flex 1填充 html部分 left center right css部分 box left,right center 2.position定位，左右固定，中間自適應 利用絕對定位 html部分 left center right css部分 ...