三栏布局的n种实现
本文主要讨论左右边栏固定宽度,中间栏填满其余空间的布局。至于其他类型,基本上也就是半斤和八两。每一种布局都会有个Demo,个人依然认为文章里帖代码并没有Demo来的直接。所以正文负责解释,源码参见Demo。其中讨论了这么多种(6种)布局,有以下理由:1是每种布局也都有他的毛病,没有十全十美的,每种布局也都有人在用。2是虽然有相对优秀的方案,但是不优秀的方案也有有用的东西在里边,可能会启发其他的思路补充遗漏的知识点。
- 利用绝对定位特点:左右两栏采用绝对定位抽离文档流,分别固定于页面的左右两侧,中间栏用左右margin值撑开可以容纳左右边栏的距离。这个很简单不多解释。Demo:http://www.dabao.love/demo/layoutDemo/absoluteLayout.html
- 利用两侧浮动都不占据文档流:左栏左浮动,右栏右浮动,中间栏左右margin值等于左右栏宽度。html中,中间栏要放在左右边栏的后边。道理上和绝对定位差不多,就是不占文档流了其他元素就填充上了,只要把两边留出空间不导致重合即可。Demo:http://www.dabao.love/demo/layoutDemo/twoSidesFloatLayoutDemo.html
- 利用浮动和margin负值的特点:标签顺序为<middle><sub></sub></middle> <left></left> <right></right> 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:http://www.dabao.love/demo/layoutDemo/floatLayoutDemo.html
- 利用inline-block特点:父元素包含左中右栏:(子元素顺序中,左,右)父元素设置padding为左右栏留出空间,然后中栏宽度100%占据除padding外的空间,左右栏利用margin-left等于自身宽的负值使其与中栏右边界重合,再调节left,左栏left为-100%右栏left为右栏宽度。左中右栏全部为子元素,所以margin-left无法占据padding空间,需要左右边栏相对定位后调解left值达到目标状态。其中注意父元素设置font-size: 0; letter-spacing: -4px; 子元素再重置这两个属性。Demo:http://www.dabao.love/demo/layoutDemo/inlineBlockLayoutDemo.html
- 利用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:http://www.dabao.love/demo/layoutDemo/useCalcLayoutDemo.html
- 利用flex布局:flex布局我认为是最先进而方便的布局,非常灵活不过内容也不少,只可惜兼容ie10+。不在这多废话,推荐阮一峰老师的教程:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool 父元素display:flex; ,左右两栏设置flex-basis 预置宽度,中间栏flex-grow: 1;自动伸展。完活。Demo:http://www.dabao.love/demo/layoutDemo/flexLayoutDemo.html
如有纰漏欢迎批评指正,没有纰漏也欢迎拍砖。
三栏布局的n种实现的更多相关文章
- CSS三栏布局的四种方法
总括: 不管是三栏布局还是两栏布局都是我们在平时项目里经常使用的,也许你不知道什么事三栏布局什么是两栏布局但实际已经在用,或许你知道三栏布局的一种或两种方法,但实际操作中也只会依赖那某一种方法,本文具 ...
- CSS系列,三栏布局的四种方法
三栏布局.两栏布局都是我们在平时项目里经常使用的,今天我们来玩一下三栏布局的四种写法,以及它的使用场景. 所谓三栏布局就是指页面分为左中右三部分然后对中间一部分做自适应的一种布局方式. 1.绝对定位法 ...
- css 实现三栏布局的四种方式
三栏布局就是左中右,左右两边固定,中间自适应. 1. 绝对定位 <div class="left">左边</div> <div class=" ...
- Layout 实现三栏布局的几种方法
https://github.com/ljianshu/Blog/issues/14 布局参考 https://github.com/ljianshu/Blog/issues/38 响应式那点 ...
- 三种方法实现CSS三栏布局
本文由云+社区发表 作者:前端林子 本文会分别介绍三种CSS实现三栏布局的方法,可在浏览器中打开查看效果 1.方法一:自身浮动的方法 实现方法:需要左栏向左浮动,右栏向右浮动,中间设左右margin来 ...
- Css三栏布局自适应实现几种方法
Css三栏布局自适应实现几种方法 自适应实现方法我们可以从三个方法来做,一个是绝对定位 ,自身浮动法 和margin负值法了,下面我们一起来看看这三个例子吧,希望例子能帮助到各位同学. 绝对定位法三栏 ...
- 详解 CSS 七种三栏布局技巧
作者:林东洲 链接:https://zhuanlan.zhihu.com/p/25070186 来源:知乎 著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 三栏布局,顾名思义就是 ...
- css中常用的七种三栏布局技巧总结
三栏布局,顾名思义就是两边固定,中间自适应.三栏布局在开发十分常见,那么什么是三栏布局?例如当当网首页边商品导航和右边导航固定宽度,中间的主要内容随浏览器宽度自适应.效果如下图所示: 下面围绕的这样的 ...
- CSS实现三栏布局(5种)
常见的布局方式: float布局.Position定位.table布局.弹性(flex)布局.网格(grid)布局 那么我们就是用以上5种方式完成三栏布局,不过前提是左右宽度(假如左右宽度为300px ...
随机推荐
- AQTime教程(1)
AQTime教程 1 简介 AQTime和MemProof都是AutomatedQA旗下的产品,AQTime比MemProof提供了更丰富强大的功能.该产品含有完整的性能和调试工具集,能够收集程序运行 ...
- Linux安装JDK详细步骤
Linux安装JDK步骤 1.先从网上下载jdk(jdk-7u1-linux-i586.rpm),下载地址:http://www.oracle.com/technetwork/java/javase/ ...
- Http协议网络对时工具
2009-09-17 11:52:31 专业的网络对时软件大多採用NTP协议来获取专业时间server时间对时,也有採用SNTP协议的,本来也想做个SNTP或NTP协议的对时工具自己用,尽管我手上也有 ...
- [Java][Android][Process] 暴力的服务能够解决一切,暴力的方式运行命令行语句
不管是在Java或者Android中运行命令行语句殊途同归都是创建一个子进程运行调用可运行文件运行命令.类似于Windows中的CMD一样. 此时你有两种方式运行:ProcessBuilder与Run ...
- 【Android 应用开发】Activity 状态保存 OnSaveInstanceState參数解析
作者 : 韩曙亮 转载请著名出处 : http://blog.csdn.net/shulianghan/article/details/38297083 一. 相关方法简单介绍 1. 状态保存方法演示 ...
- 【01】视C++为一个语言联邦
1.C++是个多重范型编程语言:面向过程,面向对象,函数编程,泛型形式,元编程形式. 2.C++是一个语言联邦,包括四个次语言: a.C语言,C++以C语言为基础.但C语言有下列局限:没有模版,没有异 ...
- Session Store
Session Store Configuration Session Usage Flash Data Session Drivers Configuration Since HTTP driven ...
- WinServer 之 发布WebService后调用出现" The test form is only available for requests from the local machine. "
当您尝试从远程计算机访问 Web 服务时,不会显示“调用”按钮.并且,您会收到以下错误信息: The test form is only available for requests from the ...
- MySQL(18):Select- subquery子查询
1. Select- subquery子查询 子查询:是将一条查询语句嵌套在另一条查询语句之中. 2. 案例 需求:查询获得代课天数最多的那个老师的信息. 思路:先获得最多的代课天数是多少天,然后再判 ...
- Java基础知识强化之多线程笔记02:多线程之 面试题(常问)
1. 多线程有几种实现方案,分别是哪几种 ? 两种. 继承Thread类 实现Runnable接口 扩展一种:实现Callable接口.这个得和线程池结合. 2. 同步有几种方式,分别是什么? ...