三种方法实现CSS三栏布局

nodejh 发布于2019-08-23 15:10 / 2780人阅读

摘要：本文由云社区发表作者前端林子本文会分别介绍三种实现三栏布局的方法，可在浏览器中打开查看效果方法一自身浮动的方法实现方法需要左栏向左浮动，右栏向右浮动，中间设左右来撑开距离实现三栏布局中间栏不要设宽度，包括左栏左浮右栏右浮，中间不

本文由云+社区发表

作者：前端林子

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

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

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




    
    CSS实现三栏布局1
    


    
    
    左栏
    右栏
    中间栏

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

实现的效果如下：

自身浮动实现三栏布局

2.方法二：margin负值法

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




    
    CSS实现三栏布局2
    


    
    中间栏
    左栏
    右栏

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

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

实现的效果如下：

margin负值法实现三栏布局

3.方法三：绝对定位法

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




    
    CSS实现三栏布局3
    


    
    
    左栏
    中间栏
    右栏

实现的效果如下：

此文已由腾讯云+社区在各渠道发布

获取更多新鲜技术干货，可以关注我们腾讯云技术社区-云加社区官方号及知乎机构号

云服务器 GPU云服务器三种实现方法三栏布局 html5 三栏布局三种画线方法java

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101624.html

三种方法实现CSS三栏布局

摘要：本文由云社区发表作者前端林子本文会分别介绍三种实现三栏布局的方法，可在浏览器中打开查看效果方法一自身浮动的方法实现方法需要左栏向左浮动，右栏向右浮动，中间设左右来撑开距离实现三栏布局中间栏不要设宽度，包括左栏左浮右栏右浮，中间不本文由云+社区发表作者：前端林子本文会分别介绍三种CSS实现三栏布局的方法，可在浏览器中打开查看效果 1.方法一：自身浮动的方法实现方法：需要左栏向左浮...

hqman 2019-08-30 15:55 评论0 收藏0
三种方法实现CSS三栏布局

摘要：本文由云社区发表作者前端林子本文会分别介绍三种实现三栏布局的方法，可在浏览器中打开查看效果方法一自身浮动的方法实现方法需要左栏向左浮动，右栏向右浮动，中间设左右来撑开距离实现三栏布局中间栏不要设宽度，包括左栏左浮右栏右浮，中间不本文由云+社区发表作者：前端林子本文会分别介绍三种CSS实现三栏布局的方法，可在浏览器中打开查看效果 1.方法一：自身浮动的方法实现方法：需要左栏向左浮...

wmui 2019-08-02 14:13 评论0 收藏0
三种方法实现CSS三栏布局

摘要：本文由云社区发表作者前端林子本文会分别介绍三种实现三栏布局的方法，可在浏览器中打开查看效果方法一自身浮动的方法方法一自身浮动的方法实现方法需要左栏向左浮动，右栏向右浮动，中间设左右来撑开距离实现三栏布局中间栏不要设宽度，包括左栏本文由云+社区发表作者：前端林子本文会分别介绍三种CSS实现三栏布局的方法，可在浏览器中打开查看效果 1.方法一：自身浮动的方法实现方法：需要左栏向左浮...

gggggggbong 2019-04-23 11:50 评论0 收藏0
CSS学习笔记(八) 页面布局之三栏-固定宽度布局

摘要：示例添加这一行规则结果就会变成这样我们把这种现象称为浮动滑移，可以使用三种方法来预防发生从设定的元素宽度中减去添加的水平外边距边框和内边距的宽度和。当我们取消勾选该属性时，栏就会由于栏的推挤产生了浮动滑移，移位到栏下方。 1.布局前的认知 1.1 三种基本方案多栏布局有三种基本的实现方案：固定宽度、流动、弹性。固定宽度。布局的大小不会随用户调整浏览器窗口大小而变化，一般是 ...

eechen 2019-08-28 18:03 评论0 收藏0
三种方式实现圣杯布局

摘要：本文会用三种方法来实现圣杯布局，分别是浮动，以及。先移动左边，新加一个样式。小结总的来说，我认为使用弹性盒子布局实现圣杯模式是最方便最快速且不用担心移动端的适配问题。圣杯布局的三种实现圣杯布局是一种很常见的css布局。他要求：上部和下部各自占领屏幕所有宽度。上下部之间的部分是一个三栏布局。三栏布局两侧宽度不变，中间部分自动填充整个区域。中间部分的高度是三栏中最高的区域的高...

cgspine 2019-08-30 13:58 评论0 收藏0