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>
05-07 12:28