常见的布局上（两列布局）
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>