<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> header{height: 100px;background: #454;} footer{height: 100px;background: #666;} #content{clear:both;} #content:after{content: "020"; display: block; height: 0; clear: both; visibility: hidden;'} .sub,.main,.extra{height: 500px;float: left;} .sub{width: 190px;background: red;margin-left: -100%} .main{width: 100%;background: green;} .main-inner{margin:0px 320px 0px 290px;} .extra{width: 220px;background:blue;margin-left: -220px;} </style> </head> <body> <div id="page"> <header></header> <div id="content"> <div class="main"> <div class="main-inner">我是B</div> </div> <div class="sub">我是A</div> <div class="extra">我是C</div> </div> <footer></footer> </div> </body> </html>
著名的双飞翼布局：sub和extra区域固定宽度main区域出现在中间且随窗口尺寸自动化变化，基本思路是让三个盒子都向左浮动，同时将sub盒子左"移动"距离“-100%”，这样sub将会重叠在main盒子上面并紧贴父元素左边缘，extra也做相同处理，不过只向左"移动"230px,这样extra就会贴父元素的右边缘放置，main-inner再以合适的左右边距就实现了。这种布局可以保证主要内容在文档中靠前出现。