<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.wrap{
height: 60px;
margin-left: 200px;
margin-right: 100px;
background: pink;
}
.left{
/*position: absolute;*/
/*top: 0;*/
/*left: 0;*/
float: left;
width: 200px;
height: 60px;
background-color: yellow;
}
.right{
/*position: absolute;*/
/*top: 0;*/
/*right: 0;*/
float: right;
width: 100px;
height: 60px;
background-color: blue;
}
</style>
</head>
<body>
<div class="wrap"></div>
<div class="left"></div>
<div class="right"></div>
<!--
当浏览器宽度变化时 没有设置宽度
wrap在自身宽度发生变化的同时
始终保持和浏览器左边200px 右边100px的距离
-->
</body>
</html>