作者:峡谷人123_742 | 来源:互联网 | 2020-08-11 13:45
本篇文章给大家带来的内容是介绍CSS如何实现三列布局?实现三列布局的3种方法(代码示例)。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。
三列布局指的是两边两列定宽,中间的宽度自适应。
常用三种方法:
定位方式
最直观和容易理解的一种方法,左右两栏选择绝对定位,固定于页面的两侧,中间的主体选择用margin确定位置
Left
Center
Right
结果
浮动方法
让左右两边部分浮动,脱离文档流后对中间部分使用margin来自适应
Left
Right
Center
弹性盒布局
使用容器包裹三栏,并将容器的display设置为flex,左右两部分宽度设置为固定,中间flex设置为1,左右两边的值固定,所以中间的自适应
以上就是CSS如何实现三列布局?实现三列布局的3种方法(代码示例)的详细内容,更多请关注 第一PHP社区 其它相关文章!