三栏布局

方法一：

  
  
  


  

  

    

      aside aside aside aside aside aside aside aside aside 
      aside aside aside aside aside aside aside aside aside 
      aside aside aside aside aside aside aside aside aside 
      aside aside aside aside aside aside aside aside aside 
    
    

      bside bside bside bside bside bside bside bside bside 
      bside bside bside bside bside bside bside bside bside 
      bside bside bside bside bside bside bside bside bside 
      bside bside bside bside bside bside bside bside bside 
    
    

      main main main main main main main main main main main 
      main main main main main main main main main main main 
      main main main main main main main main main main main 
      main main main main main main main main main main main 
      main main main main main main main main main main main 
      main main main main main main main main main main main 
    
    
  
  

Paste_Image.png

注意：使用此方法布局html中需要优先左右框，最后main框，否则会产生问题
内容框高我没有设置，需要按照实际情况去设计，否则会高度不一致

方法二：

  
  




    
header
    

        

            

                我是主区块 我是主区块 main main  main
                我是主区块 我是主区块 main main  main
                我是主区块 我是主区块 main main  main
                我是主区块 我是主区块 main main  main
                我是主区块 我是主区块 main main  main
                我是主区块 我是主区块 main main  main
                我是主区块 我是主区块 main main  main
                我是主区块 我是主区块 main main  main
                我是主区块 我是主区块 main main  main
            
        
        

          aside aside aside aside aside aside aside aside 
          aside aside aside aside aside aside aside aside 
          aside aside aside aside aside aside aside aside 
          aside aside aside aside aside aside aside aside 
        
    
    
footer

Paste_Image.png

三栏布局是在两栏的基础上完成：
圣杯布局
content设置左右边距，宽度等于side1宽度，side1左浮动，side1负边距设为-100%。
side2左浮动，设置负边距等于自身宽度值。

  
  
  


 

   

   
side1
   
side2
 

Paste_Image.png

双飞翼布局

  
  
  


 

   

     
ffffff
   
   
side1
   
side2
 

Paste_Image.png