当前位置:  首页  >  前端开发  >  CSS+DIV

CSS如何实现三列布局?实现三列布局的3种方法(代码示例)

​本篇文章给大家带来的内容是介绍CSS如何实现三列布局?实现三列布局的3种方法(代码示例)。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。
本篇文章给大家带来的内容是介绍CSS如何实现三列布局?实现三列布局的3种方法(代码示例)。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

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

常用三种方法:

  • 定位

  • 浮动

  • 弹性盒布局

定位方式

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




    
    定位方法创建三列布局
    


    
Left
Center
Right

结果

浮动方法

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




    
    浮动法创建三列布局
    


    
Left
Right
Center

弹性盒布局

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

 


    
    弹性盒子创建三列布局
    


    
Left
Center
Right

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

吐了个 "CAO" !
扫码关注 PHP1 官方微信号
PHP1.CN | 中国最专业的PHP中文社区 | json解析格式化 | PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有