双飞翼布局的意义
第一可以实现三列布局左右固定宽度,中间宽度自适应,第二个,通常三列布局都是按照左(sub)中(main)右(extra)顺序来写的,这样页面也会根据这个DOM结构来顺序加载,而如果用双飞翼布局,可以使三列布局中mian
先加载,sub
和extra
后加载。
双飞翼布局的实现
双翼
html:
<body>
<div class="main"></div>
<div class="sub"></div>
<div class="extra"></div>
</body>
- 这里如果都设置左浮动,
main
就会出现在页面左边; - 我们都知道,如果浮动布局一排里显示不下时,行框就会被挤到下一行;
- 那么如果边距为负,他会移动到页面以外,当值大于等于自身宽度时,他就会被移动到上一行。
- 这时就可以使用负边距来实现另外两列的布局
css:
.main{ float:left;width:100%;}
.sub{ float:left;width:190px;margin-left:-100%;}
.extra{float:left;width:230px;margin-left:-230px;}
效果如图:
鸟身
- 此时
sub
和extra
都定位到正常位置了,但是main
的左侧和右侧被挡住了。 - 因为
main
,sub
,extra
都处在浮动层,而且main
是固定宽度,如果给main
设置margin或者padding值,会因为其固有的宽度而撑开飞翼布局,直接影响到sub
,extra
的位置; - 所以给
main
设置一个内层,为内层设置margin值
html:
<div class="main">
<div class="main-content">
</div>
</div>
<div class="sub"></div>
<div class="extra"></div>
css:
.main-content{margin:0 230px 0 190px;}
效果图: