左中右 三栏式 布局

一、中间 自适应，左右两边 宽度固定

方法1：box容器 Flex布局，center设置为 flex:1

    
    
    
    
    



    

        
left
        
center
        
right
    

---

方法2：左、右两栏 分别 float:left、float:right。center左右margin，或者激活center的BFC

    
    
    
    
    



    
    
left
    
right
    
center

---

方法3：左、右两栏 分别 绝对定位，center左右margin

    
    
    
    
    



    

        
left
        
center
        
right
    

---

 方法4：三栏都 float: left；对center的宽度 进行 calc()计算

    
    
    
    
    



    

        
left
        
center
        
right
    

---

 方法5：双飞翼布局（重点）优先显示 main主要部分 !

分析：

1.首先container只是一个三栏布局整体的包裹，不是布局重点。main占据整行，main的子元素main-wrap才是中间的内容区域。main-wrap设置 左、右margin的目的是为left、right两栏留空。

2.三栏都 float: left；

3.中间栏width:100%；左栏margin-left: -100%； 右栏 （负 自身宽度） margin-left: -190px

（解释：由于main宽100%，此时left、right两栏都被挤到第二行。设置各自的 “负margin-left值”使它们分别移动到 第一行的左右两边）

    
    
    
    
    



    

        

            
 #main
                
ipsum dolor sit amet consectetur adipisicing elit. Rerum consequatur
                amet assumenda quasi, nulla unde laboriosam non id eum natus magni praesentium quibusdam ducimus sed!
                Fuga iusto veniam ipsam voluptatum?
            
        
        
#left
        
#right
    

 

 

---

 方法6：圣杯布局（也是重点）优先显示 main主要部分 !

分析：

1.最外层wrapper设置padding-left、padding-right。目的是为left、right两栏留空。

2.三栏都 float: left；

3.main的width: 100%、 left栏margin-left: -100%、right栏margin-left: -100px（负 自身宽度）

（解释：由于main宽100%，此时left、right两栏都被挤到第二行。设置各自的 “负margin-left值”使它们分别移动到 第一行的左右两边）

4.left栏left: -100px;、right栏right: -100px;  两栏都 相对自身定位position: relative;

（解释：left、right两栏都 相对于自身， 分别 向左右两边 移动自身的宽度）

    
    
    
    
    



    

        
main
        
left
        
right
    

---

总结：

1. 为避免因窗口缩放，或窗口变窄而出现 布局错乱，可为三栏布局的外层包裹设置min-width。

2.双飞翼 与圣杯布局比较：

相同点：三栏都利用float，中间栏width100%，另外两栏利用“负margin-left”移动到上一行。

不同点：为left、right两栏留空的方式不同（不同的标签嵌套方式）！圣杯在最外层包裹上使用了padding，使得left、right两栏需要添加position:relative，相对自身向两边位移。

相较而言，双飞翼布局方式不需要 position，更直观一些。

详见：css三列布局--两边固定中间自适应和中间固定两边自适应_中间固定两边自适应布局_DOM曼珠沙华的博客-CSDN博客