CSS如何实现三列布局？实现三列布局的3种方法（代码示例）

三列布局指的是两边两列定宽，中间的宽度自适应。

常用三种方法：

• 定位

• 浮动

• 弹性盒布局

定位方式

最直观和容易理解的一种方法，左右两栏选择绝对定位，固定于页面的两侧，中间的主体选择用margin确定位置

    
    
    


    
Left
    
Center
    
Right

结果

浮动方法

让左右两边部分浮动，脱离文档流后对中间部分使用margin来自适应

    
    
    


    
Left
    
Right
    
Center
  

弹性盒布局

使用容器包裹三栏，并将容器的display设置为flex，左右两部分宽度设置为固定，中间flex设置为1，左右两边的值固定，所以中间的自适应

 


    
    
    


    

        
Left
        
Center
  
        
Right
    

以上就是CSS如何实现三列布局？实现三列布局的3种方法（代码示例）的详细内容，更多请关注 第一PHP社区 其它相关文章！