三栏布局的n种实现

aisuhua 发布于2019-08-29 10:54 / 900人阅读

摘要：本文主要讨论左右边栏固定宽度，中间栏填满其余空间的布局。每一种布局都会有个，个人依然认为文章里帖代码并没有来的直接。其中讨论了这么多种种布局，有以下理由是每种布局也都有他的毛病，没有十全十美的，每种布局也都有人在用。

本文主要讨论左右边栏固定宽度，中间栏填满其余空间的布局。至于其他类型，基本上也就是半斤和八两。每一种布局都会有个Demo，个人依然认为文章里帖代码并没有Demo来的直接。所以正文负责解释，源码参见Demo。其中讨论了这么多种（6种）布局，有以下理由：1是每种布局也都有他的毛病，没有十全十美的，每种布局也都有人在用。2是虽然有相对优秀的方案，但是不优秀的方案也有有用的东西在里边，可能会启发其他的思路补充遗漏的知识点。

1. 利用绝对定位特点：

左右两栏采用绝对定位抽离文档流，分别固定于页面的左右两侧，中间栏用左右margin值撑开可以容纳左右边栏的距离。这个很简单不多解释。 Demo:absoluteLayout

2. 利用两侧浮动都不占据文档流：

左栏左浮动，右栏右浮动，中间栏左右margin值等于左右栏宽度。html中，中间栏要放在左右边栏的后边。道理上和绝对定位差不多，就是不占文档流了其他元素就填充上了，只要把两边留出空间不导致重合即可。 Demo：twoSidesFloatLayoutDemo

3. 利用浮动和margin负值的特点：

标签顺序为 middle 宽度 100%，sub 左右 margin 为左右栏留出空间,其中 sub 元素不要浮动，否则会包裹里面的内容而不会撑满空间，其他元素全部左浮动。left 的 margin-left 为－100%，right 的margin-left为sub的负的margin-right 。浮动的特点就是紧跟着前一个元素，放不下了就换行，本来middle元素占满了第一行，sub元素的margin留出的空间并不会给其他的浮动元素，左栏被迫换行，处于第二行最左侧，相当于紧跟着第一行后边，100%的负margin－left会让他从紧跟着第一行变成第一行最左边，这时左栏和sub元素的margin－left留出的空间重合，达到目的，此时右栏在原来左栏的位置，再用类似的处理方式，达到最终效果。其中sub的margin可以换为padding，相同的原理和效果。此处如果不需要撑满空间（有内容撑满sub）可以不要父元素（即middle）。Demo：floatLayoutDemo。说的有点乱其实就是这个样子：

4. 利用inline-block特点：

父元素包含左中右栏：（子元素顺序中，左，右）父元素设置padding为左右栏留出空间，然后中栏宽度100%占据除padding外的空间，左右栏利用margin－left等于自身宽的负值使其与中栏右边界重合，再调节left，左栏left为－100%右栏left为右栏宽度。左中右栏全部为子元素，所以margin－left无法占据padding空间，需要左右边栏相对定位后调解left值达到目标状态。其中注意父元素设置font-size: 0; letter-spacing: -4px; 子元素再重置这两个属性。 Demo：inlineBlockLayoutDemo。说的有点乱，其实就是这个样子：

5. 利用calc属性和inline－block特点：

父元素设置（同样是父元素包含左中右栏）： text-align:center; font-size: 0; letter-spacing: -4px; 左中右栏再重置： font-size: 16px; letter-spacing: normal; 左右栏固定宽度， html中元素顺序为：左，中，右，假设左右栏宽度和300px；中间拦： width:calc(100% - 300px); 百分比与固定宽度混合布局使用，支持ie9+，注意＋－＊／号两边留空格 Demo：useCalcLayoutDemo

6. 利用flex布局：

flex布局我认为是最先进而方便的布局，非常灵活不过内容也不少，只可惜兼容ie10+。不在这多废话，推荐阮一峰老师的教程：flex教程。父元素display:flex; ，左右两栏设置flex-basis 预置宽度，中间栏flex-grow: 1;自动伸展。完活。 Demo：flexLayoutDemo

私有云服务器托管三栏布局 html5 三栏布局 android布局的实现三种实现方法

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

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

实现三栏布局的几种方法

摘要：前言三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽度自适应。但网格布局的兼容性不好。前言三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局：即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽...

golden_hamster 2019-08-02 11:55 评论0 收藏0
实现三栏布局的几种方法

摘要：前言三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽度自适应。但网格布局的兼容性不好。前言三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局：即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽...

IamDLY 2019-08-29 17:12 评论0 收藏0
实现三栏布局的几种方法

摘要：前言三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽度自适应。但网格布局的兼容性不好。前言三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在实际的开发十分常见，比如淘宝网的首页，就是个典型的三栏布局：即左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽...

Hegel_Gu 2019-08-23 12:52 评论0 收藏0
三种方法实现CSS三栏布局

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

hqman 2019-08-30 15:55 评论0 收藏0