Css中实现一个盒子固定宽度，另一个盒子宽度自适应的方法
网上方法很多，个人认为以下两种思想是最为常用的。
一种是让第一个盒子脱离文档流，第二个盒子离左边有一定距离。
第二种方法是使用flex布局，不过有一些兼容性问题。
直接上代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><style type="text/css">.div1{background: red;}.div2{background: yellow;}.way1>.div1{float:left;width: 200px;height:100px;}.way1>.div2{margin-left: 200px;height: 100px;}.way2{display: flex;}.way2>.div1{width: 200px;height: 100px;}.way2>.div2{flex: 1;height: 100px;}.way3{position: relative;}.way3>.div1{width: 200px;height:100px;display: inline-block;}.way3>.div2{height: 100px;position:absolute;left: 200px;right:0;display: inline-block;}</style><script></script><body><!-- 两栏式布局，一方固定，一方自适应 --><!-- 方法1 浮动布局和margin-left,利用了块级元素占满一行的特性--><h1>方法2</h1><div class="way1"><div class="div1"></div><div class="div2"></div></div><!-- 方法2 flex布局--><h1>方法2</h1><div class="way2"><div class="div1"></div><div class="div2"></div></div><!-- 方法3 display+相对定位绝对定位方法--><h1>方法3</h1><div class="way3"><div class="div1"></div><div class="div2"></div></div></body></html>
