总结一下双飞翼布局吧，这个比较经典的布局笔试面试有可能会考。
先把html贴上来
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>双飞翼布局</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="wrap">
<div id="main">
<div id="mainIN">
main
</div>
</div>
<div id="left">left</div>
<div id="right">right</div>
</div>
</body>
</html>
双飞翼的思路如下:
1、将main的width设为100%，填满全局；
2、设left的width为30%，让left覆盖main的左30%；
3、设right的width为20%，让right覆盖right的右20%；
4、让mainIN的左右边距分别为30%，20%；
5、双飞翼成功，最后显示的是left、mainIN、right三部分；
从其思路能看出来实现双飞翼的要点有两个，一是如何让left和right覆盖main的左右；二是要让mainIN空出左右边距；
这样我再贴出来css代码大家看起来就比较明了了
#left,#main,#right{
height: 200px;
float: left;
}
#main{
background-color: blue;
width:100%;
}
#left{
background-color: orange;
width:30%;
margin-left: -100%;
}
#right{
background-color: red;
width:20%;
margin-left: -20%;
}
#mainIN{
margin: 0 20% 0 30%;
}
简单明了，再说一遍要点：
1、利用float：left让三块浮动，让这三块有并排的可能；
2、利用margin-left：-x%;让left和right移到上一行与main同行；
3、margin: 0 20% 0 30%;让mainIN空出main的左右部分；
4、最后显示的三部分为left、mainIN、right；
思路记好就行了，代码并不重要。
时间： 2024-08-24 05:48:05