三种实现圣杯布局方法

本文介绍三种实现圣杯布局的方法,前两种可归为一类，与第三种方法差别在于加载顺序不同。

圣杯布局实现1：

步骤1：给出 HTML结构：

    
          
        
              
    
    
        

            
这是Top!
            

                
这是Left!
                
这是Content!













这是多行高度！

               
这是Right!
            
           
这是Foot!
        
    

效果如下：

Paste_Image.png

步骤2：

• 设置中间三个div向左浮动，使其排列在一行： #left, #content,#right{ float:left;}。
• 设置Foot元素清除浮动，阻止与上面的main部分重叠：#foot { background: #666; height: 50px; clear: both;}。
• 设置中间三个div的宽度，左右定宽，中间宽度自适应：

            #left {
                background: #E79F6D;
                width: 150px;
            }
            #content {
                background: #D6D6D6;  
                width: 100%;
            }
            #right {
                background: #77BBDD;  
                width: 200px;
            }

效果如下：

Paste_Image.png

步骤3：

• 现在Content宽度为100%，占满整个浏览器宽度，若想要中间Content给两边Left和Right挪出空间，则需要设置容器main左右padding值。
• 由于容器main内元素均设置左浮动，都不在文档流中，导致main高度塌陷，设置overflow:hidden可解决该问题。

#main{
     padding-left: 150px;
     padding-right: 200px;
     background-color: bisque;
     }

效果如下：

Paste_Image.png

步骤4：

由于设置padding后，中间三个div宽度之和超过浏览器宽度，所以各独占一行，要使Left元素和Right元素分别移动到Content的左右两边，则需要给Left设置负的margin-left,给Right设置负的margin-right。

            #left {
                background: #E79F6D;
                width: 150px;
                margin-left: -150px;;
            }
            #right {
                background: #77BBDD;  
                width: 200px;
                margin-right: -200px
            }

效果如下：

Paste_Image.png

步骤5：

使中间三个div高度自适应，即高度相等且等于高度最大的div，使用内外下边距相抵消的方法：
#left, #content, #right { float:left; padding-bottom: 2000px; margin-bottom: -2000px; }
最终效果如下：

Paste_Image.png

最终代码：

    
          
        
              
    
    
        

            
这是Top!
            

                
这是Left!
                
这是Content!













这是多行高度！

               
这是Right!
            
           
这是Foot!
        
    

圣杯布局实现2：

与方法1的前三步相同，在第四步时采用了不同的解决方案：

步骤4-1

通过为Content和Right设置一个负的margin-left属性：

      #content {
             background: #D6D6D6;  
             width: 100%;
             margin-left: -150px; 
      }
         #right {
             background: #77BBDD;  
             width: 200px;
             margin-left: -200px;
      }

效果如下：（此时Left被覆盖）

Paste_Image.png

步骤4-2

设置Left和Right的positon分别调整其位置使左移和右移：

              #left {
                background: #E79F6D;
                width: 150px;
                position: relative;
                left: -150px;
            }
            #right {
                background: #77BBDD;  
                width: 200px;
                margin-left: -200px;
                position: relative;
                left: 200px;
            }

效果如下：

Paste_Image.png

步骤四完成，步骤五同方法1。
最终代码：

    
          
        
              
    
    
        

            
这是Top!
            

                
这是Left!
                
这是Content!













这是多行高度！

               
这是Right!
            
           
这是Foot!
        
    

圣杯布局实现3（先加载主列）：

效果如下：

4770448-f4aeb930e2732d89.png

最终代码：

    
    
    



    

        

            我是主列，出来吧！
        
    
    
我是子列
    
我是附加列