双飞翼布局

Posted 2020-08-23 晨落梦公子

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了双飞翼布局相关的知识，希望对你有一定的参考价值。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         body{
 8             margin: 0;
 9             padding: 0;
10         }
11         .fix{
12             float: left;
13         }
14         .left{
15             background-color: red;
16             width: 150px;
17             margin-left: -100%;
18         }
19         .main{
20             background-color: cornflowerblue;
21             width: 100%;
22         }
23         .right{
24             background-color: chartreuse;
25             width: 200px;
26             margin-left: -200px;
27         }
28         .inner{
29             margin-left: 150px;
30             margin-right: 200px;
31         }
32     </style>
33 </head>
34 <body>
35 <div id="box">
36     <div class="main fix"><div class="inner">中间</div></div>
37     <div class="left fix">左边</div>
38     <div class="right fix">右边</div>
39 </div>
40 </body>
41 </html>

个人理解：

　　双飞翼布局目的是实现当浏览器界面缩小的时候左右定宽，中间缩小。所以有左右两块设置定宽。

　　解释下负边距问题，我的理解是，先说没有负边距时候的效果，上面代码中左边会挤没，右边被挤下来。而双飞翼布局目的是要把左右两块和中间的一块并排排列，而这里的实现方式是把左右两块和中间的内部块并排排列。为了实现这种效果，就设置了负边距，负边距的意思是把他俩“抓”到里面去。-100% 和 -200px的区别，说白了就是把-100%的元素放到最前面，100%指的是整个界面的宽度，-200px只是单纯的将元素强制向左“拉”200px的距离，也就把其拉到了上面。

　　最终的结果就是，把“左块”、“右块”、“中间内部块”都拉入到了中间内部。从而实现双飞翼。

以上是关于双飞翼布局的主要内容，如果未能解决你的问题，请参考以下文章