双飞翼布局 

<!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再以合适的左右边距就实现了。这种布局可以保证主要内容在文档中靠前出现。

posted @ 2015-05-05 14:40  黑暗骑士之“闪”  阅读(146)  评论(0)  编辑  收藏  举报