CSS 布局实例系列(三)如何实现一个左右宽度固定,中间自适应的三列布局——也聊聊双飞翼
文章转自:http://www.cnblogs.com/honoka/p/5161836.html
今天聊聊一个经典的布局实例:
实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化
可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现。不过,还请容我在双飞翼之外,循序渐进地介绍一下我们可以如何实现一个三列布局。
1. 首先,使用浮动布局来实现一下
- 左侧元素与右侧元素优先渲染,分别向左和向右浮动
- 中间元素在文档流的最后渲染,并将 width 设为 100%,则会自动插入到左右两列元素的中间,随后设置 margin 左右边距分别为左右两列的宽度,将中间元素调整到正确的位置。
这是一种比较便利的实现方式,无需额外的元素辅助定位,同时兼容性也比较优秀。但有一个缺点就是该布局方式只能实现左右两列宽度固定,中间自适应这一种三列布局,灵活性不强。
2. 其实,也可以试试利用 BFC
昨天的《CSS 布局实例系列(二)如何通过 CSS 实现一个左边固定宽度、右边自适应的两列布局》已经谈到了利用 BFC 原理实现多列布局的方法。BFC 元素不会与浮动元素叠加,自然也可以利用 BFC 原理完成这个实例。
- 同样的左右两列元素优先渲染,并分别左右浮动。
- 接下来将中间元素设置 overflow: hidden; 成为 BFC 元素块,不与两侧浮动元素叠加,则自然能够插入自己的位置啦。
3. 接下来就尝试一下大名鼎鼎的双飞翼布局吧
双飞翼是由淘宝玉伯等前端大牛提出的一种多列布局方法,主要利用了浮动、负边距、相对定位三个布局属性,使三列布局就像小鸟一样,拥有中间的身体和两侧的翅膀。
接下来就简单介绍一下双飞翼的实现过程:
- 假设我们现在需要一个如实例说明一样的三列布局,写出如下 div 结构:
<divclass="grid"><divid="div-middle-02"><span>div-middle</span></div><divid="div-left-02"><span>div-left</span></div><divid="div-right-02"><span>div-right</span></div> </div>
- 首先我们将中间元素放在文档流最前面优先渲染,然后使其向左浮动,并设置 width 为 100%:
#div-middle-02{float:left;background-color:#fff9ca;width:100%;height:50px; }
中间元素直接占满全列,形成小鸟的身体。
- 接下来我们开始为小鸟加上双翼,将左右两列元素均设为左浮动,然后通过调整负边距将其定位在各自的位置上:
#div-middle-02{float:left;background-color:#fff9ca;width:100%;height:50px; }#div-left-02{float:left;background-color:red;width:150px;margin-left:-100%;height:50px;}#div-right-02{float:left;background-color:yellow;width:200px;margin-left:-200px;height:50px; }
看起来,双翼安装成功啦。
- 这样三列布局就大功告成了?No,no,no,仔细看看上面的效果图,可以发现 div-middle 的字块消失了。这是因为通过负边距调整浮动元素位置时,会产生层叠的效果,上面的布局其实只是左右两列元素分别定位在自己的位置上并覆盖中间元素的那部分而已,中间元素的定位并未成功。中间元素要怎样定位在自己的位置上呢?小鸟的身体不是还缺少骨架嘛,那么我们在小鸟体内加上骨架吧:
<divid="div-middle-02"><divid="middle-wrap-02"><span>div-middle</span></div> </div>
在中间元素中再增加一层包裹,通过这层骨架我们就可以方便地控制小鸟身体的位置啦,方法就是调整骨架的左右边距,使其分别等于左右两列的宽度:
#div-middle-02{float:left;background-color:#fff9ca;width:100%;height:50px; }#middle-wrap-02{margin:0 200px 0 150px; }#div-left-02{float:left;background-color:red;width:150px;margin-left:-100%;height:50px;}#div-right-02{float:left;background-color:yellow;width:200px;margin-left:-200px;height:50px; }
好啦,一个左右定宽,中间自适应的三列布局以双飞翼的方式成功完成。
- 总结整个过程,就是先放好身体,再加上翅膀,然后让身体包裹一层骨架,通过骨架将身体定位到正确的位置。这就是双飞翼布局的完全体吗?当然不是,接下来我们要请出大杀器相对布局啦,就像小鸟可以通过各种不同的姿势飞翔一般,通过 position: relative; 双飞翼可以实现任意的三列或双列布局。本实例加上相对定位,便成为了这样的完全体:
#div-middle-02{float:left;background-color:#fff9ca;width:100%;height:50px; }#middle-wrap-02{margin:0 200px 0 150px; }#div-left-02{float:left;position:relative;background-color:red;width:150px;margin-left:-100%;height:50px;}#div-right-02{float:left;position:relative;background-color:yellow;width:200px;margin-left:-200px;height:50px; }
- 双飞翼能够兼容到 IE6,其可以实现的各种布局在此便不作展开了,有兴趣可以参考玉伯分享的 DEMO
4. 跟上潮流,试试 flex
看完了强大的双飞翼布局,是不是已经心急火燎地想亲手试试啦。别急,客官,再听我唠唠 CSS3 的新布局 flex 呗。先让我说明一下上面的 DEMO 中是怎样实现本次实例的:
- 设计一个弹性容器包裹需定位的三个元素,然后将该弹性容器的排列属性设为水平排列(flex-flow: row)
- 现在三个元素已经是三列布局了,再将三列元素分别设定一下宽度就行了,左右元素设定为定宽,自适应的中间元素设定为 100%。
.flex{display:flex;flex-flow:row; }#div-left-03{background-color:red;width:150px;height:50px; }#div-middle-03{background-color:#fff9ca;width:100%;height:50px; }#div-right-03{background-color:yellow;width:200px;height:50px; }
效果如下图:
- 搞定收工!大哥你瞪着我是怎么回事儿?~ 什么?效果不对?我的代码怎么可能不对?!~ 哎呦,别打我,我马上检查(哭)好吧,宽度不对,左右两侧的宽度均不符合设定的定值。什么情况呢?原来在 flex 布局中不能将被定位的元素宽度或高度设定为 100%,这样会影响其他定值大小的元素。那么该如何设置中间元素的宽度呢,flex: 1; 即可,可以试一下 DEMO 中去掉注释与不去掉的区别。
- 最后简单介绍一下 flex:flex 是 CSS3 的一种弹性容器布局,通过 flex,几行简单的 CSS 语句便可以实现各种布局(对!我就是 flex NC粉~被拍飞~)。那么 flex 有什么缺点呢?对,就是兼容性!
- 所以在使用 flex 的时候还请注意是否兼容当前浏览器,是否需要 -webkit- 标签。flex 的具体语法和各类实例因为篇(lan)幅(de)过(xie)多的原因,也不做过多介绍了,可以参考阮一峰老师的博文:
Flex 布局教程:语法篇
Flex 布局教程:实例篇
最后感谢大家的阅读,欢迎前往我的 repo 查看源代码整理,有任何问题也请尽情向我吐槽。
CSS 布局实例系列(三)如何实现一个左右宽度固定,中间自适应的三列布局——也聊聊双飞翼相关推荐
- CSS 布局实例系列(三)如何实现一个左右宽度固定,中间自适应的三列布局——也聊聊双飞翼...
今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞 ...
- html如何左侧固定div,详解左右宽度固定中间自适应html布局解决方案
原标题:详解左右宽度固定中间自适应html布局解决方案 本文介绍了详解左右宽度固定中间自适应html布局解决方案,分享给大家,具体如下: a.使用浮动布局 html结构如下 left right ce ...
- xHTML+div布局:三个div,两边div宽度固定,中间div宽度自适应
xHTML+div经常考题:三个div,两边div宽度固定,中间div宽度自适应. 和大家分享一个实现方式: 1.html代码 1 <div class="dyleft"&g ...
- CSS 布局实例系列(四)如何实现容器中每一行的子容器数量随着浏览器宽度的变化而变化?...
Hello,小朋友们,还记得我是谁吗?对了,我就是~超威~好啦,言归正传,今天的布局实例是: 实现一个浮动布局,红色容器中每一行的蓝色容器数量随着浏览器宽度的变化而变化,就如下图: 肯定有人心里犯嘀咕 ...
- Android布局中的空格以及占一个汉字宽度的空格的实现
在Android布局中进行使用到空格,以便实现文字的对齐.那么在Android中如何表示一个空格呢? 空格: 窄空格: 一个汉字宽度的空格: [用两个空格( )占一个汉字的宽度时,两个空格比一 ...
- HTML+CSS大作业:使用html设计一个简单好看的公司官网首页 浮动布局
- css布局 右固定,CSS左侧固定右侧自适应的五种布局方法
在页面或者布局列表中,常常有左侧固定,右侧自使用的情况,接下来,这五种方法满足这个需求. 一.左边浮动,右边margin .box{ height: 200px; background-color: ...
- vue css页面滚动,无滚动条, 实现顶部导航固定,自适应布局 main标签+calc()
前言: 在写app的时候我们经常使用的是导航固定,内容滚动,以前经常使用的是better-scroll插件,后来碰到了点bug,现在改使用main标签了 效果图: (顶部导航固定,内容页滚动) 页面布 ...
- php 三色排序,一个数组中只有0,1,2三种元素,要求对这样的数组进行排序,一个数组中只有0,1,2三种元素,要求对这样的数组进行排序,第2章 排序 | | 第17节 三色排序练习题...
1.思路: 1.1思路1: 第一眼看到这样的题目,会举得非常简单,只需要两次遍历数组就可以完成了.第一次遍历,扫描数组中的元素,每次遇到0则count0++,遇到1则count1++,遇到2则coun ...
最新文章
- Fatal error: Can't open and lock privilege tables: Table 'mysql.host' doesn't exist的
- LinkedList中查询(contains)和删除(remove)源码分析
- ArcGIS 9.2 Server Pack 5 蓄势待发
- 电力系统潮流计算matlab程序,大神们,求个电力系统潮流计算的matlab程序。
- php 如何单独刷新模板,反馈一个x-admin模板的问题,点击左侧栏不会刷新右侧栏当前页面的问题,并提供解决方案。...
- 第二篇 模拟电子技术基础
- 服务器系统时间提前八小时,windows服务器时间少八小时
- mysql创建数据库命令
- C#中combobox不可编辑与不可选择
- iPhone平台下的游戏开发
- logstash增量同步mysql数据到es
- 开源论坛之discourse搭建
- 转载:诠释Flash的职业发展道路
- Java全栈开发---Java ERP系统开发:商业ERP(七
- 斐讯路由器怎么设置虚拟服务器,斐讯无线路由器设置教程图解
- 【FPGA】超声波测距
- mysql有没有开窗函数_mysql实现开窗函数
- 电驴搜索服务器正在连接,电驴未连接到服务器是什么原因?
- thinkadmin关联查询
- 如果Iphone被偷了,能找回来吗?