圣杯布局/双飞翼布局/Flex布局/Grid布局/绝对定位布局实现三栏布局示例

一、效果:两边固定,中间自适应的三栏布局

圣杯布局/双飞翼布局/Flex布局/Grid布局/绝对定位布局实现三栏布局示例_第1张图片
两边固定,中间自适应

二、代码

1、圣杯布局



    
        圣杯布局
        
        
        
    
    
     
main
left
right

2、双飞翼布局



    
        双飞翼布局
        
        
        
    
    
     
main
left
right

3、Flex布局



    
        Flex布局
        
        
        
    
    
     
main
left
right

4、Grid布局



    
        Grid布局
        
        
        
    
    
     
main
left
right

5、绝对定位布局



    
        绝对定位布局
        
        
        
    
    
     
main
left
right

你可能感兴趣的:(圣杯布局/双飞翼布局/Flex布局/Grid布局/绝对定位布局实现三栏布局示例)