摘要：三列布局，左右固定寬度右邊自適應(yīng)不使用定位，只使用浮動可以實(shí)現(xiàn)左右固定，中間寬度自適應(yīng)布局自適應(yīng)部分一定要放第一個位子，使用浮動，并且設(shè)置寬度為，不設(shè)置浮動元素內(nèi)容不夠稱不開整個寬度左右固定部位，使用負(fù)數(shù)，使其左右靠齊中間自適應(yīng)部分嵌套一

css 三列布局，左右固定寬度右邊自適應(yīng)

1不使用定位，只使用浮動可以實(shí)現(xiàn)左右固定，中間寬度自適應(yīng)布局

1.1.1 自適應(yīng)部分一定要放第一個位子，使用浮動，并且設(shè)置寬度為100%，不設(shè)置浮動元素內(nèi)容不夠稱不開整個寬度

1.1.2 左右固定部位，使用margin-left :負(fù)數(shù)，使其左右靠齊

1.1.3 中間自適應(yīng)部分嵌套一個div，設(shè)置margin-left 和 margin-right 使其空出左右固定的寬度

!DOCTYPE HTML html lang="en-US" head meta charset="UTF-8" title 三列布局 /title style .box{ height: 500px; background-color: bisque; position: relative; .box .box-content { height: 100%; float: left; /* 一定要設(shè)置浮動，要不下面的模塊上不來 */ width:100%;/* 一定要設(shè)置100%，要不內(nèi)容不夠稱不開整個頁面 */ background-color: blue; /* 默認(rèn)還是整行 */ .box .box-content .child { margin: 0 210px; /* 中間模塊空出左右距離，設(shè)置浮動 */ background: red; height: 100%; .box .box-left { width: 200px; float: left; margin-left: -100%; /* 設(shè)置浮動， margin-left:-100% 可以使元素往上移一行，并且移動到最左邊 */ height: 300px; background-color: green; .box .box-right { float: left; width: 200px; min-height: 100%; margin-left: -200px;/* 設(shè)置浮動， margin-left:負(fù)的自身寬度 可以使元素往上移一行，并且移動到最右邊 */ background-color: pink; header,footer { height: 75px; background-color: aqua; } /style /head body header /header div div div 中間主題內(nèi)容 /div /div div 11dsdasdas不你弟弟呢多帶帶 /div div 12酷酷酷酷酷的的是計(jì)算機(jī)技術(shù)升級的歷史記錄 /div /div footer /footer /body /html

1.2 其實(shí)只是簡單的中間內(nèi)容自適應(yīng)，還可以設(shè)置，中間的元素塊狀元素盒子模型為ie下的盒子模型，

再使用padding也是可以實(shí)現(xiàn)的

style .box{ height: 500px; background-color: bisque; position: relative; .box .box-content { box-sizing:border-box; height: 100%; float: left; /* 一定要設(shè)置浮動，要不下面的模塊上不來 */ width:100%;/* 一定要設(shè)置100%，要不內(nèi)容不夠稱不開整個頁面 */ /* 默認(rèn)還是整行 */ padding:0 210px; .box .box-content .child { /* 中間模塊空出左右距離，設(shè)置浮動 */ background-color: blue; height: 100%; .box .box-left { width: 200px; float: left; margin-left: -100%; /* 設(shè)置浮動， margin-left:-100% 可以使元素往上移一行，并且移動到最左邊 */ height: 300px; background-color: green; .box .box-right { float: left; width: 200px; min-height: 100%; margin-left: -200px;/* 設(shè)置浮動， margin-left:負(fù)的自身寬度 可以使元素往上移一行，并且移動到最右邊 */ background-color: pink; header,footer { height: 75px; background-color: aqua; } /style body header /header div div div !-- 這個div只是為了方便看，設(shè)置了以下背景色 可用可不用，內(nèi)容區(qū)還是自適應(yīng)的 -- 中間主題內(nèi)容 /div /div div 11dsdasdas不你弟弟呢多帶帶 /div div 12酷酷酷酷酷的的是計(jì)算機(jī)技術(shù)升級的歷史記錄 /div /div footer /footer /body

2，上面其實(shí)是圣杯布局，我們再使用中間相對定位，左右兩邊絕對定位（中間絕對定位，不設(shè)置寬度撐不開容器）

其實(shí)只要中間的位子對應(yīng)了，左右兩邊不管是相對定位，還是絕對定位都可以

?

重點(diǎn)當(dāng)然還是中間怎么取定位（元素順序沒有關(guān)系）

如果中間取相對定位，不設(shè)置浮動，設(shè)置margin 空出左右距離，

兩邊取絕對定位，只要設(shè)置top:0 一個left:0? 一個right:0

!DOCTYPE HTML html lang="en-US" head meta charset="UTF-8" title 三列布局 /title style .box{ height: 500px; background-color: bisque; position: relative; overflow: hidden; .box .box-content { position: relative; height: 100%; margin-left: 210px; margin-right: 210px; background-color: blue; .box .box-left { width: 200px; position: absolute; height: 300px; left: 0; top:0; background-color: green; .box .box-right { width: 200px; position: absolute; min-height: 100%; right: 0px; top:0; background-color: pink; header,footer { height: 75px; background-color: aqua; } /style /head body header /header div div div 中間主題內(nèi)容asdasdasdsadsasda嘎達(dá)可根但是薩嘎薩嘎?lián)⒗锞蛪蛄思按砩探夥怕萁z釘結(jié)案率放假啊了解 /div /div div 11dsdasdas不你弟弟呢多帶帶 /div div 12酷酷酷酷酷的的是計(jì)算機(jī)技術(shù)升級的歷史記錄 /div /div footer /footer /body /html

3.我們再看下使用定位的雙飛燕布局， 雙飛燕，要對父容器設(shè)置padding ,大小等一左右固定寬度

? 左右兩邊據(jù)對定位，就這個和上面的方法差不多，我們一起看看左右兩邊相對定位

如果左右兩邊相對定位，設(shè)置margin和和left

!DOCTYPE HTML html lang="en-US" head meta charset="UTF-8" title 三列布局 /title style .box{ height: 500px; background-color: bisque; position: relative; overflow: hidden; padding: 0 210px; .box .box-content { height: 100%; float: left; background-color: blue; .box .box-left { width: 200px; position: relative; height: 300px; float: left; left: -210px; margin-left: -100%; background-color: green; .box .box-right { width: 200px; position: relative; min-height: 100%; float: left; margin-left: -200px; right: -210px; background-color: pink; header,footer { height: 75px; background-color: aqua; } /style /head body header /header div div 夠了及代理商解放螺絲釘結(jié)案率放假啊了解多嘎多gags廣東省水水水水水水水水水水水水頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂 /div div 11dsdasdas不你弟弟呢多帶帶 /div div 12酷酷酷酷酷的的是計(jì)算機(jī)技術(shù)升級的歷史記錄 /div /div footer /footer /body /html

? 4.是用flex實(shí)現(xiàn)三列布局，左右固定中間自適應(yīng)，父元素設(shè)置display: flex, 左右分別設(shè)置flex: 0 0 200px ，父元素為display:flex

那么子元素的float、clear和vertical-align屬性將失效，兼容性有問題，一般都用于移動端

!DOCTYPE html html lang="en" head meta charset="UTF-8" title 三列布局 /title style .box{ height: 500px; background-color: bisque; position: relative; display: flex; .box .box-content { flex: 0 1 auto; margin: 0 10px; background-color: blue; .box .box-left { flex: 0 0 200px; background-color: green; .box .box-right { flex: 0 0 200px; background-color: pink; header,footer { height: 75px; background-color: aqua; /style /head body header /header div div 11dsdasdas不你弟弟呢多帶帶 /div div 解斯大林經(jīng)過拉絲幾個垃圾解斯大林經(jīng)過拉絲幾個垃圾解斯大林經(jīng)過拉絲 幾個垃圾解斯大林經(jīng)過拉絲幾個垃圾解斯大林經(jīng) 過拉絲幾個垃圾解斯大林經(jīng)過拉絲幾個垃圾解斯大林經(jīng)過拉絲幾個垃圾 /div div 12酷酷酷酷酷的的是計(jì)算機(jī)技術(shù)升級的歷史記錄 /div /div footer /footer /body /html

5. 使用grid 布局實(shí)現(xiàn)三列布局，也是特別簡單，設(shè)置父元素為，單行，三列，第一列左邊寬度，中間自適應(yīng)，

右邊自適應(yīng)，當(dāng)然grid兼容性很大問題

!DOCTYPE html html lang="en" head meta charset="UTF-8" title 三列布局 /title style .box{ height: 500px; background-color: bisque; position: relative; display: grid; grid-gap: 10px; grid-template-columns: 200px auto 200px; grid-template-rows: 1fr; .box .box-content { background-color: blue; .box .box-left { flex: 0 0 200px; background-color: green; .box .box-right { flex: 0 0 200px; background-color: pink; header,footer { height: 75px; background-color: aqua; /style /head body header /header div div 11dsdasdas不你弟弟呢多帶帶 /div div 解斯大林經(jīng)過拉絲幾個垃圾解斯大林經(jīng)過拉絲幾個垃圾解斯大林經(jīng)過拉絲幾個垃圾解斯大林經(jīng)過拉絲幾個垃圾解斯大林經(jīng)過拉絲幾個垃圾解斯大林經(jīng)過拉絲幾個垃圾解斯大林經(jīng)過拉絲幾個垃圾 /div div 12酷酷酷酷酷的的是計(jì)算機(jī)技術(shù)升級的歷史記錄 /div /div footer /footer /body /html View Code

三列布局總結(jié)

1.不使用浮動的圣杯布局，左中右都設(shè)置浮動，中間設(shè)置寬度100%，嵌套一層div 使其自元素的內(nèi)容區(qū)

恰好自適應(yīng)大小，左邊右邊設(shè)置margin-left:-100% 和margin:-右邊寬度，

如果不想使用中間嵌套div,則可以設(shè)置中間的盒子模型為ie下的盒子模型，然后設(shè)置padding的值

中間模塊一定要放最前面

2. 使用定位，中間設(shè)置margin-left 左邊寬度，右邊設(shè)置margin-right 右邊寬度，父元素設(shè)置定位

position:relative; 左右兩邊設(shè)置position:absolute，絕對定位，設(shè)置 top 0 left 0 ,top 0 right 0

3. 使用定位，中間一樣，左右兩邊設(shè)置相對定位，則要設(shè)置父元素padding 或者margin 左右寬度

然后和1一樣設(shè)置，左邊右邊設(shè)置margin-left:-100% 和margin:-右邊寬度， 左邊再加上left:-寬度

右邊設(shè)置right:-右邊寬度，這個就是經(jīng)典的雙飛翼布局

4.使用彈性盒子布局，記住中間的一定要設(shè)置flex: 0 1 auto ，縮小倍數(shù)一定要是1，不是1的話盒子會

被子元素字體撐開，一般使用于移動端

5.使用grid,目前應(yīng)該有很大兼容性問題，了解就行