三栏布局的n种实现

本文主要讨论左右边栏固定宽度,中间栏填满其余空间的布局。至于其他类型,基本上也就是半斤和八两。每一种布局都会有个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。说的有点乱其实就是这个样子:

        *{margin: 0;padding: 0;height: 100%;}          .l,.r,# main{            text-align: center;            float:left;          }          # main{            width: 100%;          }          .l{            width: 100px;            margin-left: -100%;            background-color: # aaaaaa;          }          .c{            text-align: center;            margin-left: 100px;            margin-right: 200px;            background-color: # 555555;          }          .r{            width: 200px;            margin-left: -200px;            background-color: # aaaaaa;          }            我中间          我左边          我右边

4. 利用inline-block特点

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

        *{margin: 0;padding: 0;height: 100%;}          .l,.c,.r{            display: inline-block;            font-size: 16px;            letter-spacing: normal;          }          .l{            width: 100px;            margin-left: -100px;            position: relative;            left: -100%;          }          .c{            width:100%;            background-color: # 555555;          }          .r{            position: relative;            width: 200px;            margin-left: -200px;            left: 200px;          }          # box{            text-align:center;            padding-left: 100px;            padding-right: 200px;            background-color: # aaaaaa;            font-size: 0;            letter-spacing: -4px;          }            我中间            我左边            我右边

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

关键字:css, 布局, flex, 自适应

版权声明

本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部