css 三列布局，左右固定寬度右邊自適應
1不使用定位，只使用浮動可以實現左右固定，中間寬度自適應布局
1.1.1 自適應部分一定要放第一個位子，使用浮動，並且設置寬度為100%，不設置浮動元素內容不夠稱不開整個寬度
1.1.2 左右固定部位，使用margin-left :負數，使其左右靠齊
1.1.3 中間自適應部分嵌套一個div，設置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; /* 一定要設置浮動，要不下面的模塊上不來 */ width:100%;/* 一定要設置100%，要不內容不夠稱不開整個頁面 */ background-color: blue; /* 默認還是整行 */ } .box .box-content .child { margin: 0 210px; /* 中間模塊空出左右距離，設置浮動 */ background: red; height: 100%; } .box .box-left { width: 200px; float: left; margin-left: -100%; /* 設置浮動， margin-left:-100% 可以使元素往上移一行，並且移動到最左邊 */ height: 300px; background-color: green; } .box .box-right { float: left; width: 200px; min-height: 100%; margin-left: -200px;/* 設置浮動， margin-left:負的自身寬度 可以使元素往上移一行，並且移動到最右邊 */ background-color: pink; } header,footer { height: 75px; background-color: aqua; } </style> </head> <body> <header> </header> <div class="box"> <div class="box-content"> <div class="child"> 中間主題內容 </div> </div> <div class="box-left"> 11dsdasdas不你弟弟呢單獨 </div> <div class="box-right"> 12酷酷酷酷酷的的是計算機技術升級的歷史記錄 </div> </div> <footer> </footer> </body> </html>
1.2 其實只是簡單的中間內容自適應，還可以設置，中間的元素塊狀元素盒子模型為ie下的盒子模型，
再使用padding也是可以實現的
<style> .box{ height: 500px; background-color: bisque; position: relative; } .box .box-content { box-sizing:border-box; height: 100%; float: left; /* 一定要設置浮動，要不下面的模塊上不來 */ width:100%;/* 一定要設置100%，要不內容不夠稱不開整個頁面 */ /* 默認還是整行 */ padding:0 210px; } .box .box-content .child { /* 中間模塊空出左右距離，設置浮動 */ background-color: blue; height: 100%; } .box .box-left { width: 200px; float: left; margin-left: -100%; /* 設置浮動， margin-left:-100% 可以使元素往上移一行，並且移動到最左邊 */ height: 300px; background-color: green; } .box .box-right { float: left; width: 200px; min-height: 100%; margin-left: -200px;/* 設置浮動， margin-left:負的自身寬度 可以使元素往上移一行，並且移動到最右邊 */ background-color: pink; } header,footer { height: 75px; background-color: aqua; } </style> <body> <header> </header> <div class="box"> <div class="box-content"> <div class="child"><!-- 這個div只是為了方便看，設置了以下背景色 可用可不用，內容區還是自適應的 --> 中間主題內容 </div> </div> <div class="box-left"> 11dsdasdas不你弟弟呢單獨 </div> <div class="box-right"> 12酷酷酷酷酷的的是計算機技術升級的歷史記錄 </div> </div> <footer> </footer> </body>
2，上面其實是聖杯布局，我們再使用中間相對定位，左右兩邊絕對定位（中間絕對定位，不設置寬度撐不開容器）
其實只要中間的位子對應了，左右兩邊不管是相對定位，還是絕對定位都可以
重點當然還是中間怎么取定位（元素順序沒有關系）
如果中間取相對定位，不設置浮動，設置margin 空出左右距離，
兩邊取絕對定位，只要設置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 class="box"> <div class="box-content"> <div class="child"> 中間主題內容asdasdasdsadsasda嘎達可根但是薩嘎薩嘎據阿里就夠了及代理商解放螺
絲釘結案率放假啊了解 </div> </div> <div class="box-left"> 11dsdasdas不你弟弟呢單獨 </div> <div class="box-right"> 12酷酷酷酷酷的的是計算機技術升級的歷史記錄 </div> </div> <footer> </footer> </body> </html>
3.我們再看下使用定位的雙飛燕布局， 雙飛燕，要對父容器設置padding ,大小等一左右固定寬度
左右兩邊據對定位，就這個和上面的方法差不多，我們一起看看左右兩邊相對定位
如果左右兩邊相對定位，設置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 class="box"> <div class="box-content"> 夠了及代理商解放螺絲釘結案率放假啊了解多嘎多gags廣東省水水水水水水水水水水
水水頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂 </div> <div class="box-left"> 11dsdasdas不你弟弟呢單獨 </div> <div class="box-right"> 12酷酷酷酷酷的的是計算機技術升級的歷史記錄 </div> </div> <footer> </footer> </body> </html>
4.是用flex實現三列布局，左右固定中間自適應，父元素設置display: flex, 左右分別設置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 class="box"> <div class="box-left"> 11dsdasdas不你弟弟呢單獨 </div> <div class="box-content"> 解斯大林經過拉絲幾個垃圾解斯大林經過拉絲幾個垃圾解斯大林經過拉絲
幾個垃圾解斯大林經過拉絲幾個垃圾解斯大林經
過拉絲幾個垃圾解斯大林經過拉絲幾個垃圾解斯大林經過拉絲幾個垃圾 </div> <div class="box-right"> 12酷酷酷酷酷的的是計算機技術升級的歷史記錄 </div> </div> <footer> </footer> </body> </html>
5. 使用grid 布局實現三列布局，也是特別簡單，設置父元素為，單行，三列，第一列左邊寬度，中間自適應，
右邊自適應，當然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 class="box"> <div class="box-left"> 11dsdasdas不你弟弟呢單獨 </div> <div class="box-content"> 解斯大林經過拉絲幾個垃圾解斯大林經過拉絲幾個垃圾解斯大林經過拉絲幾個垃圾解斯大林經過拉絲幾個垃圾解斯大林經過拉絲幾個垃圾解斯大林經過拉絲幾個垃圾解斯大林經過拉絲幾個垃圾 </div> <div class="box-right"> 12酷酷酷酷酷的的是計算機技術升級的歷史記錄 </div> </div> <footer> </footer> </body> </html>
三列布局總結
1.不使用浮動的聖杯布局，左中右都設置浮動，中間設置寬度100%，嵌套一層div 使其自元素的內容區
恰好自適應大小，左邊右邊設置margin-left:-100% 和margin:-右邊寬度，
如果不想使用中間嵌套div,則可以設置中間的盒子模型為ie下的盒子模型，然后設置padding的值
中間模塊一定要放最前面
2. 使用定位，中間設置margin-left 左邊寬度，右邊設置margin-right 右邊寬度，父元素設置定位
position:relative; 左右兩邊設置position:absolute，絕對定位，設置 top 0 left 0 ,top 0 right 0
3. 使用定位，中間一樣，左右兩邊設置相對定位，則要設置父元素padding 或者margin 左右寬度
然后和1一樣設置，左邊右邊設置margin-left:-100% 和margin:-右邊寬度， 左邊再加上left:-寬度
右邊設置right:-右邊寬度，這個就是經典的雙飛翼布局
4.使用彈性盒子布局，記住中間的一定要設置flex: 0 1 auto ，縮小倍數一定要是1，不是1的話盒子會
被子元素字體撐開，一般使用於移動端
5.使用grid,目前應該有很大兼容性問題，了解就行