CSS中经典的双飞翼布局(

标签：

     笔者在一些博客和论坛中经常看到经典的双飞翼布局，淘宝的首页也运用了这种兼容性很好的双飞翼布局

   1.何谓双飞翼布局？

    简单来说，双飞翼布局是将一个网页分为左列，中列和右列三部分，并且我们要得到的效果是：

    左列和右列宽度恒定，中间列的宽度根据浏览器窗口的大小自适应。

    2.如何实现双飞翼布局？

    （1）首先我们要得到如下的布局样式：

       <div class="container">
         <div class="column" id="center_panel"></div>
         <div class="column" id="right_panel"></div>
         <div class="column" id="left_panel"></div>
     </div>

      可以看到我们在外层用一个类名为：container的大的div包裹。而内层分为了我们所说的三列

    但是注意，在整个dom结构中，主列位于最前面

   （2）让列开始浮动

    我们让列全部浮动起来

    .column{

     float:left

    }

    并设置

    .container{

    width:100%; 

    }

    .center_panel{

    width:100%;

    }

    于是在这种情况下，center_panel已经占据了整个container父元素的全部宽度，并且这个宽度是自适应的

   （3）如何实现左右列固定宽度

    在实现左右列固定宽度时，我们这里采用了margin负值

    首先，得到左列固定宽度，我们会有：

    
      #right_panel{
          
             width:300px;
          
             margin-left:-100%;
  
          }
       这里我们假设，固定宽度的左列宽度为300px,当margin-left:-100%之时，这个左边列会脱离自己所在行，向上一行浮动，
    
       效果为：
       此时我们实现了左列固定宽度，中间列自适应
       再次，我们根据同样原理，定义右列的浮动偏移（margin负值）
      
         #left_panel{
             
             width:300px;
   
             margin-left:-300px;
    
            }
        这样，我们就实现了我们所需要的双飞翼布局，也就是中间列宽度自适应，左列和右列的宽度固定
        
        我们所得到的效果为：
     
        
     3.双飞翼布局的优点
      （1）兼容性好，兼容若有主流浏览器，包括万恶的IE6
  
      （2）因为在DOM中center_panel在三列结构的最前面，因此可以实现主要内容的优先加载
      

CSS中经典的双飞翼布局(

标签：

原文地址：http://blog.csdn.net/liwusen/article/details/51351314