三种方法实现CSS三栏布局

“ 关注 前端开发社区 ,回复"1"即可加入 前端技术交流群,回复 "2"即可免费领取 500G前端干货!

三种方法实现CSS三栏布局_第1张图片

作者:前端林子cloud.tencent.com/developer/a…

本文会分别介绍三种CSS实现三栏布局的方法,可在浏览器中打开查看效果

1.方法一:自身浮动的方法

实现方法:需要左栏向左浮动,右栏向右浮动,中间设左右margin来撑开距离




    
    CSS实现三栏布局1
    


    
    
    
左栏
右栏
中间栏

注意:该方法在html布局时,要把中间栏放在左栏、右栏后面,左栏和右栏的顺序不定

实现的效果如下:

三种方法实现CSS三栏布局_第2张图片

2.方法二:margin负值法

实现方法:两边两栏宽度固定,中间栏宽度自适应,左栏、右栏、中间栏向左浮动,左栏的margin-left设为-100%,中间栏的width设为100%,右栏的margin-left设为-右栏宽度




    
    CSS实现三栏布局2
    


    
    
中间栏
左栏
右栏

注意:该方法在html布局时,要把中间栏放在第一个

此方法是实现圣杯布局和双飞翼布局的基础。

实现的效果如下:

三种方法实现CSS三栏布局_第3张图片

3.方法三:绝对定位法

实现方法:左栏、右栏绝对定位,分别固定到页面左右两侧,中间栏不设宽度,用左右margin来撑开距离




    
    CSS实现三栏布局3
    


    
    
    
左栏
中间栏
右栏

实现的效果如下:

三种方法实现CSS三栏布局_第4张图片

最近几天会陆续更新的~~,觉得总结的可以的话,麻烦给小编点一个 在看, 谢谢!

往期:

Vue3 插件开发详解尝鲜版

vue面试题总结(一)

移动端 H5 面试(必问)的12个问题及答案

请各位帅哥美女多多支持帅编,回复“1”即可加入前端技术交流群,回复’2‘即可领取 500G 前端干货

三种方法实现CSS三栏布局_第5张图片

你可能感兴趣的:(css3,css,前端)