关于css布局的那些事-双飞翼布局
什么是双飞翼布局呢？
简单来说，就是中间自适应宽度，两边有固定宽度。
假设:
有三个div,中间的div宽度是不固定的,两边的div各有200px宽度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>双飞翼布局</title>
<style>
* {
margin: 0;
padding: 0;
}
.container {
float: left;
width: 100%;
background: #ddd;
height: 200px;
}
.main {
margin: 0 210px;
height: 500px;
background: green;
}
.left {
float: left;
width: 200px;
height: 300px;
background: red;
margin-left: -100%;
}
.right {
float: left;
width: 200px;
margin-left: -200px;
background: black;
height: 400px;
}
</style>
</head>
<body>
<!-- 中间自适应,两边固定宽度布局 -->
<div class="container">
<div class="main">1</div>
</div>
<!-- 固定在左边 宽度固定 -->
<div class="left"></div>
<!-- 固定在右边 宽度固定 -->
<div class="right"></div>
</body>
</html>
在这里可能有些朋友对于left的盒子为什么要margin-left:-100%,产生疑虑，我们来看以下的图。
同理，.right的盒子相当于向左移动本身的宽度即可。