Css中实现一个盒子固定宽度，另一个盒子宽度自适应的方法
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>
