首页 > 代码库 > 双飞翼布局
双飞翼布局
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的距离，也就把其拉到了上面。
最终的结果就是，把“左块”、“右块”、“中间内部块”都拉入到了中间内部。从而实现双飞翼。
双飞翼布局
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。