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

圣杯布局（结构简单，理解绕弯）

原理：外盒子的padding+ （left right）的相对定位

    
   
        
    
                 中间        
    
        
    
                 左边        
    
        
    
                 右边        
    
    
   

步骤：

1.在主体内部外面嵌套了一个div 2.center在结构上靠前 3.center，left，right都浮动 4.清除浮动 （给嵌套的主题外部加一个伪元素::after~在**之后，然后清除浮动） 5.center宽度为100%，left，right宽度固定 6.left通过margin-left为负值（-100%），移动到center最左边 7.right通过margin-left为负值（自身的宽度），移动到center的最右边。 8.center的内容左边和右边会被left，right遮盖 9.最外层div添加一个padding，padding的值为left，right的宽度。 10.left，right相对定位，移动到相应的位置。位移量为自身的宽度。

双飞翼布局（结构较绕）

原理：用了中间盒子的里面盒子的margin值，然后左右两边用margin-left顶开

    
   
        
    
                 中间        
    
    
   
    
   
            左边    
   
    
   
            右边    
   

步骤：

1.让left right center浮动 2.设置left的margin-left为-100% 3.设置right的margin-left为负的自身宽度 4.在center中添加一个div，将内容写在这个div中 5.为这个div添加一个margin，左右margin的值为left right的单个宽度。

弹性盒子实现三栏（结构简单，理解复杂）

原理：用了中间盒子的flex-grow属性，然后用了order属性来改变显示位置

    
   
        
    
                 中间        
    
        
    
                 左边        
    
        
    
                 右边        
    
    
   

步骤：

1.添加一个最外层的div 暂起名为 home 2.将home设置为弹性盒子（display: flex） 3.left right 固定宽度 center不设置宽度 4.将center设置为 flex-grow: 1 （用于将弹性盒子的可用空间按照比例分配给弹性元素）; 5.调整显示顺序，left： order: 1; center： order: 2 right;： order:3;

上述三种方法都能实现左右定宽，中间自适应的效果

转载地址：https://blog.csdn.net/z18237613052/article/details/111578481 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！