本文共 1305 字，大约阅读时间需要 4 分钟。

一、双飞翼布局

由三列组成，两端固定，中间自适应。

双飞翼布局的优点：兼容性好，兼容所有主流浏览器，包括万恶的IE6，因为在DOM中center_panel在三列结构的最前面，因此可以实现主要内容的优先加载。

不管怎么移动，都只是中间列的长度在变化

固定宽度的左列宽度为300px，当margin-left:-100%时，这个左边列会脱离自己所在行，向上一行浮动，margin-left: -300px;意思相同

注意这里。不是看见负数就会向上一行浮动，比如-20px，-20%，都是不一定的，一定要规定固定宽度为多少，比如上述事例中规定的额300px，如果改成200px，则margin-left也需要修改成-200px

二、圣杯布局

由三列组成，两端固定，中间自适应。外观与双飞翼布局一样。布局时与双飞翼比增加了定位和偏移设置。

    
               
       
       
   
    #header
   
    
       
   
        
    
        
    
        
    
    
   
    
       
   
    #footer
   

效果和第一个布局一样，怎么伸缩都是中间在变化，其中min-width: 600px;表示，网页最小宽度为600px，也就是你只能将页面缩减到宽度为600px，不能在缩小

三、侧边栏固定布局

（一）两栏布局

1、左侧固定，右侧自适应

    
           
   
    
    
     左侧固定
    
    
    
     右侧自适应
    
   

2、左侧自适应，右侧固定

    
           
   
    
    
     左侧自适应
    
    
    
     右侧固定
    
   

3、左右都固定

    
           
   
    
    
     左侧固定
    
    
    
     右侧固定
    
   

这个相对来说简单一些，都是固定的

（二）三栏布局

1、左侧固定，中间自适应，右侧固定

和双飞翼布局差不多

2、左侧自适应，中间和右侧固定

    
           
   
    
    
        
     
      左侧自适应左侧自适应左侧自适应左侧自适应左侧自适应左侧自适应左侧自适应左侧自适应左侧自适应左侧自适应
     
    
    
    
    
     右侧定宽
    
    
    
     中间定宽
    
   

3、左侧和中间固定，右侧自适应

    
           
   
    
    
     左侧固定
    
    
    
     中间固定
    
    
    
        
     
      右侧自适应
     
    
    
   

转载地址：http://gyvrn.baihongyu.com/