常見的布局上（兩列布局）
1.常見的兩列布局
1.1左邊固定，右邊自適應，左邊寬度已知，右邊默認占滿整行，使用left 左浮動，右邊不浮動，設置margin-left:左側寬度
<style> .box{ overflow: hidden; height: 500px; background-color: bisque; } .box .box-left { margin-left: 10px; width: 200px; min-height: 100%; float: left; background-color: pink; } .box .box-right { margin-left: 220px; margin-right: 10px; height: 100%; background-color: green; } header,footer { height: 75px; background-color: aqua; } </style> <div class="box"> <div class="box-left"> 11 </div> <div class="box-right"> 1shishsihsishsihi是不變的沙發電視櫃很多水果和客戶的感慨的沙發電視櫃很多水果和客戶的感慨大蘇打撒郭德綱你只是 第三個大概了解斯大林經過拉絲幾個垃圾 </div> </div>
1.2右側固定，寬度已知，左側自適應，記住固定的區域一定要放自適應區域的右邊，
.box{ height: 500px; background-color: bisque; position: relative; } .box .box-right { float: right; width: 200px; min-height: 100%; margin-right: 10px; background-color: pink; } .box .box-left { margin-left: 10px; margin-right: 220px; height: 100%; background-color: green; } header,footer { height: 75px; background-color: aqua; } <div class="box"> <div class="box-right"> 11 </div> <div class="box-left"> 1shishsihsishsihi是不變的沙發電視櫃很多水果和客1111111111111111111111戶的感慨的沙發電視櫃很多水果和客戶的感慨大蘇打撒郭德綱你只是
第三個大概了解斯大林經過拉絲幾個垃圾 </div> </div>
單列固定都是比較簡單的還有嵌套一層div方式，還有彈性布局方式，還有grid布局，都能實現單側固定
1.3 嵌套一層div ,左側固定，右側自適應布局，使用雙浮動，右側自適應先寫入，左側使用margin-left:-100%
不嵌套一層div，右側直接使用margin-left:左側寬度也是可以的(這個代碼就不寫了，和第一個差不多)
<style> .box{ height: 500px; background-color: bisque; position: relative; overflow: hidden; } .box .box-right { float: left; margin-left: -100%; width: 200px; min-height: 100%; background-color: pink; } .box .box-left { float: left; width: 100%; height: 100%; background-color: green; } .box .box-left .son { margin-left: 210px; } header,footer { height: 75px; background-color: aqua; } </style> <body> <header> </header> <div class="box"> <div class="box-left"> <div class="son"> 1shishsihsishsihi是不變的沙發電視櫃很多水果和客1111111111111111111111戶的感慨的沙發電視櫃很多水果和客戶的感慨大蘇打撒郭德綱你只是
第三個大概了解斯大林經過拉絲幾個垃圾 </div> </div> <div class="box-right"> 11 </div> </div> <footer> </footer> </body>
1.4 t彈性布局
<style> .box{ height: 500px; background-color: bisque; position: relative; display: flex; } .box .box-left { margin-left: 10px; flex: 0 0 200px; /* 參數分別是 放大，縮小 初始大小 */ background-color: pink; } .box .box-right { margin-left: 10px; margin-right: 10px; height: 100%; background-color: green; } header,footer { height: 75px; background-color: aqua; } </style> <body> <header> </header> <div class="box"> <div class="box-left"> 11 </div> <div class="box-right"> 1shishsihsishsihi是不變的沙發電視櫃很多水果和客1111111111111111111111戶的感慨的沙發電視櫃很多水果和客戶的感慨
大蘇打撒郭德綱你只是 第三個大概了解斯大林經過拉絲幾個垃圾 </div> </div> <footer> </footer> </body>
1.5 grid布局,grid相對於flex的話屬於二維布局，可以定義行數，定義列數，定義行高列高，寬度也可以自適應，設置父容器的display:grid。grid 有很大的兼容性問題。慎用
使用grid 相當於設置行數為1，列數為2的grid布局，使用grid可以很容易實現九宮格布局
<style> .box{ height: 500px; background-color: bisque; position: relative; display: grid; padding: 0 10px; grid-template-rows: 1fr; grid-template-columns: 200px auto; grid-gap: 10px; } .box .box-left { background-color: pink; } .box .box-right { background-color: green; } header,footer { height: 75px; background-color: aqua; } </style> <body> <header> </header> <div class="box"> <div class="box-left"> 11 </div> <div class="box-right"> 1shishsihsishsihi是不變的沙發電視櫃很多水果和客1111111111111111111111戶的感慨的沙發電視櫃很多水果和客戶的感慨 大蘇打撒郭德綱你只是 第三個大概了解斯大林經過拉絲幾個垃圾 </div> </div> <footer> </footer> </body>
使用grid實現9宮格布局
<style> .box{ height: 500px; background-color: bisque; position: relative; display: grid; padding: 0 10px; grid-template-rows: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; grid-gap: 10px; } .box .box-left { background-color: pink; } .box .box-right { background-color: green; } header,footer { height: 75px; background-color: aqua; } </style> <body> <header> </header> <div class="box"> <div class="box-left"> 11 </div> <div class="box-right"> 1shishsihsishsihi是不變的沙發電視櫃很多水果和客1111111111111111111111戶的感慨的沙發電視櫃很多水果和客戶的感慨 大蘇打撒郭德綱你只是 第三個大概了解斯大林經過拉絲幾個垃圾 </div> <div class="box-left"> 11 </div> <div class="box-right"> 1shishsihsishsihi是不變的沙發電視櫃很多水果和客1111111111111111111111戶的感慨的沙發電視櫃很多水果和客戶的感慨 大蘇打撒郭德綱你只是 第三個大概了解斯大林經過拉絲幾個垃圾 </div> <div class="box-left"> 11 </div> <div class="box-right"> 1shishsihsishsihi是不變的沙發電視櫃很多水果和客1111111111111111111111戶的感慨的沙發電視櫃很多水果和客戶的感慨 大蘇打撒郭德綱你只是 第三個大概了解斯大林經過拉絲幾個垃圾 </div> <div class="box-left"> 11 </div> <div class="box-right"> 1shishsihsishsihi是不變的沙發電視櫃很多水果和客1111111111111111111111戶的感慨的沙發電視櫃很多水果和客戶的感慨 大蘇打撒郭德綱你只是 第三個大概了解斯大林經過拉絲幾個垃圾 </div> <div class="box-left"> 11 </div> </div> <footer> </footer> </body>
1.6 使用定位實現左側固定右側自適應布局，
1.6.1使用相對定位，該布局，左側固定div 的高度已知，
<style> .box{ height: 500px; background-color: bisque; position: relative; } .box .box-left { margin-left: 10px; width: 200px; height: 400px; background-color: pink; } .box .box-right { position: relative; top: -100%; margin-left: 220px; height: 100%; background-color: green; margin-right: 10px; } header,footer { height: 75px; background-color: aqua; } </style> <body> <header> </header> <div class="box"> <div class="box-left"> 11 </div> <div class="box-right"> 1shishsihsishsihi是不變的沙發電視櫃很多水果和客1111111111111111111111戶的感慨的沙發電視櫃很多水果和客戶的感慨 大蘇打撒郭德綱你只是 第三個大概了解斯大林經過拉絲幾個垃圾 </div> </div> <footer> </footer> </body>
1.6.2 使用相對定位實現左側固定，右側自適應，div高度未知，將自適應的模塊放前面，固定寬度div設置top:-100%
<style> .box{ height: 500px; background-color: bisque; position: relative; } .box .box-left { position: relative; top: -100%; margin-left: 10px; width: 200px; height: 400px; background-color: pink; } .box .box-right { margin-left: 220px; height: 100%; background-color: green; margin-right: 10px; } header,footer { height: 75px; background-color: aqua; } </style> <body> <header> </header> <div class="box"> <div class="box-right"> 1shishsihsishsihi是不變的沙發電視櫃很多水果和客1111111111111111111111戶的感慨的沙發電視櫃很多水果和客戶的感慨 大蘇打撒郭德綱你只是 第三個大概了解斯大林經過拉絲幾個垃圾 </div> <div class="box-left"> 11 </div> </div> <footer> </footer> </body>
1.6.3 使用絕對定位，兩個模塊都使用絕對定位，可以不使用浮動
<style> .box{ height: 500px; background-color: bisque; position: relative; } .box .box-left { position: absolute; margin-left: 10px; width: 200px; height: 400px; background-color: pink; } .box .box-right { position: absolute; margin-left: 220px; height: 100%; background-color: green; margin-right: 10px; } header,footer { height: 75px; background-color: aqua; } </style> <body> <header> </header> <div class="box"> <div class="box-right"> 1shishsihsishsihi是不變的沙發電視櫃很多水果和客1111111111111111111111戶的感慨的沙發電視櫃很多水果和客戶的感慨 大蘇打撒郭德綱你只是 第三個大概了解斯大林經過拉絲幾個垃圾 </div> <div class="box-left"> 11 </div> </div> <footer> </footer> </body>
1.6.4 左側先放入固定模塊，設置定位為絕對定位，右側模塊無論使用什么定位，只要margin-left：左側寬度，
都能實現這個布局
<style> .box{ height: 500px; background-color: bisque; position: relative; } .box .box-left { position: absolute; margin-left: 10px; width: 200px; height: 400px; background-color: pink; } .box .box-right { margin-left: 220px; height: 100%; background-color: green; margin-right: 10px; } header,footer { height: 75px; background-color: aqua; } </style> <body> <header> </header> <div class="box"> <div class="box-left"> 11 </div> <div class="box-right"> 1shishsihsishsihi是不變的沙發電視櫃很多水果和客1111111111111111111111戶的感慨的沙發電視櫃很多水果和客戶的感慨 大蘇打撒郭德綱你只是 第三個大概了解斯大林經過拉絲幾個垃圾 </div> </div> <footer> </footer> </body>
上面所以布局的實現圖
總結，左側固定右側自適應布局
1、不使用定位，左側固定，浮動，右側，設置margin-left：左側寬度
2、不適用定位，左側固定，浮動，右側也浮動，，右側模塊一定要寫在左側模塊之前，左側使用margin-left:-100%
2.1右側使用margin:左側寬度，
2.2左側設置寬度100%,嵌套一層div,設置margin:左側寬度（這種方式有點多余，在兩列布局上）
3、使用定位，父元素設置display:relative(為啥不使用absolute，子元素要是設置也是absolute，
那么都不知道跑什么地方去了)
3.1 左元素不設置定位，右側元素設置相對定位display:relative;則，有點設置top：左側高度，margin：左側寬度
3.2 左側寬度不定，則將左側和右側元素都設置為相對定位，右側元素先放入頁面，左側設置top:-100%.右側設置
margin-left：左側寬度（3.1的左側高度要已知，而這個左側高度可以不已知）
3.2 左側元素為絕對定義，則右側元素直接設置margin-left:左側寬度，（left，margin-left,對於自適應的
寬度，margin會使寬度變窄，而left 是不會的，如果要是用left:左側寬度，那么一定要設置margin-right:左側寬度）
4、使用flex布局，單列布局，設置父元素display:flex;左側元素的flex為;:0 0 width;右側元素不用設置
5、使用grid布局，grid布局是二維布局，設置為1行，1列，第一列寬度為定位寬度，第二列寬度為auto,子元素不用設置
上面基本上覆蓋了所以的左側固定，右側自適吟的布局，第一種最簡單， 4 5 有一定兼容性問題，flex常用語移動端。
如果您還有更好的方法，請給我留言。