css 多栏自适应布局
在页面重构中,我们经常会需要实现多栏布局,例如n栏固定宽度 + m栏自适应宽度的组合,绝对布局+padding+百分比宽度是容易想到的比较暴力的解决方法,但是作为未来的"工程师",我们应该需求一些优雅点的方法。先说说两栏布局,上例子:
<div class='container' >
<div class='div1' >1</div>
<div class='div2' >2</div>
</div>
如图,假如在一个容器中,有两个子元素,我们想元素1宽度为200px,元素2宽度铺满剩下的容器宽度,比较暴力的方法就是前面说的绝对布局+padding+百分比宽度,关键css:
//暴力方法 绝对布局 + padding + 百分比
.container{padding-left: 200px;position: relative;}
.div1{height: 200px;position: absolute;left:;}
.div2{width: 100%;}
当然,此处.div2是块级元素,不设宽度也可以。
第二种方法,就是用到dom元素特定条件下的神秘的 “BFC” 特清除浮动性,不了解的搜索一下,直接上关键css
//优雅方法 float + BFC
.div1{width:200px;float: left;}
.div2{overflow: hidden;}
怎么样,是不是优雅了很多。因为在已知.div1具体宽度的条件下,也可以不触发.div2的BFC特性,设置其 margin-left:200px 也可以达到同样的页面效果,但是假如.div1改变了呢,这就需要手动改.div2的margin-left了,这就不够灵活了,感兴趣的可以自己试一下。
第三种方法,用到css3的flex布局,也就是传说中新一代的布局--流动式布局,原理不说,上关键css
//前卫方法 flex
.container{display: flex;}
.div1{width:200px;}
.div2{flex:;}
是不是也很简单,想了解更多原理性的东西还是建议观摩一下大神的博客吧,这里只是总结知识的地方 0.0 ,而且flex布局在某些浏览器下可能需要前缀,可以到 http://pleeease.io/play/ 自动添加浏览器前缀(不错的书签)
第四种方法,曾经在 “远古时期” 的前端圈子风靡一时table布局,上css
//远古方法 table + table-cell
.container{display:table;width: 100%;}
.div1{width:200px;display: table-cell;}
.div2{display:table-cell;}
其实看上去也蛮简单的嘛,哈哈。。不过可能是名字不够高大上或者其他什么原因被其他布局方式取代的吧
前面所说的例子都是针对两栏布局的,如果是两栏以上的需求,float + BFC 的方法就不太好使了,因为只能有一栏可以通过清除浮动自适应铺满剩余宽度,个人就建议用 flex 布局了,原理是一样的,固定宽度的就设置宽度,自适应的就根据比例设置flex数值,table布局的话也不够 flex 灵活,固定宽度的 table-cell 就设置宽度,不设置宽度的就会均分剩余宽度了。
总结以上,flex是最灵活的,其实flex的牛13之处还有很多,例如它可以实现
.container{ display:flex;
align-items: center;//子元素垂直居中
justify-content: center;//子元素水平居中
}
当然,align-items 和 justify-content 在旧浏览器也有不同写法的,但是现代浏览器大多数都支持这种写法了,保守起见,使用的时候还是去 http://pleeease.io/play/ 、http://caniuse.com/ 查一查
.container{display: flex;flex-direction: column;height: 500px;}
.div1{width: 100%; flex:;}
.div2{width: 100%;height: 200px;}
.div3{width: 100%;flex:;}
其他更神奇的用法就慢慢学习吧,有不正确的地方请指出
css 多栏自适应布局的更多相关文章
- css多栏自适应布局
css多栏自适应布局还是需要总结一下的,都是基本功. 一般使用position属性布局,或者用float属性布局,也可以使用display属性. 看资料说position适合首页布局,因为首页内容往往 ...
- CSS 三栏自适应布局
CSS布局 这个很基础,方法也很多,要留意的知识点还是有一些. 比如IE6的触发layout *zoom:1 比如使用浮动后的清除浮动 clear:both 需求的延伸也会有一些: 比如三栏等高 ...
- CSS 3栏自适应布局
绝对定位 css html,body{margin: 0px;height:100%;} div{height: 100%;} .left,.right {top: 0px;position: abs ...
- 【转】CSS深入理解流体特性和BFC特性下多栏自适应布局
这篇文章发布于 2015年02月12日,星期四,23:36,归类于 css相关. 阅读 30873 次, 今日 63 次 by zhangxinxu from http://www.zhangxinx ...
- CSS深入理解流体特性和BFC特性下多栏自适应布局
一.块状元素的流体特性与自适应布局 块状元素像放在容器中的水流一样,内容区域会随着margin, padding, border的出现自动填满剩余空间,这就是块状元素的流体特性. 来一个小实验: di ...
- css实现等高布局 两栏自适应布局 三栏自适应布局
等高布局: HTML结构如下: <div class="wrapper"> <div class="box"> <h1>.. ...
- 你知道BFC、IFC、FFC、GFC及多栏自适应布局吗?
FC(Formatting Context)格式化内容,常见的FC有BFC.IFC.FFC.GFC四种类型,BFC和IFC是W3C CSS2.1规范提出的概念,FFC和GFC是W3C CSS3规范提出 ...
- css布局 - 两栏自适应布局的几种实现方法汇总
这种两列布局的样式是我们在平时工作中非常常见的设计,同时也是面试中要求实现的高频题.很有必要掌握以备不时之需: 整理了几种实现方法,当然,风骚的代码不止这几种能实现,欢迎各位的补充. 方法汇总目录 简 ...
- 使用CSS实现三栏自适应布局(两边宽度固定,中间自适应)
来源:http://blog.csdn.net/cinderella_hou/article/details/52156333 所谓三列自适应布局指的是两边定宽,中间block宽度自适应.这道题在今年 ...
随机推荐
- MFC窗口重绘
Invalidate()与 UpdateAllViews()有什么分别 Invalidate()是让程序重画窗口. UpdateAllViews()是在DOC/VIEW结构中, 当一个视图的数据改变后 ...
- [NYOJ 536] 开心的mdd
开心的mdd 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描述himdd有一天闲着无聊,随手拿了一本书,随手翻到一页,上面描述了一个神奇的问题,貌似是一个和矩阵有关的东西. ...
- 结合Zen Coding快速编写HTML代码(sublime text2篇)
首先说下,如何在sublime text2加上zen coding插件 按 Ctrl+`(就是~这个键) 复制下面的代码 确认 重新启动sublime text2 import urllib2,os; ...
- linux下安装
挂载 1.虚拟机里选择ios文件2.挂载光驱命令: cd / mount /mnt/cdrom/ cd /mnt/cdrom/ ls 卸载 cd /umount /mnt/cdrom/ 安装 XXX. ...
- Appium 小白从零安装 ,Appium连接真机测试。
以下是我个人在初次安装使用Appium时的过程,过程中遇到了一些问题,在这里也一一给出解决办法. Appium安装过程 先安装了 Node.js.在node的官网上下载的exe安装文件. 在node的 ...
- bootstrap-内联表单 水平(横向)表单 响应式图片 辅助类 [转]
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 华为2015 简单 字典输入法 java
题目摘自http://blog.csdn.net/dongyi91/article/details/38639915 写了2个小时,水平太菜了 入法的编码原理为:根据已有编码表,当输入拼音和数字后输出 ...
- Esper系列(十二)Variables and Constants
功能:变量和常量的定义及应用. EPL配置创建 1 "); 3 // 创建 orderBean 事件类型变量 bean 4 epAdmin.createEPL("creat ...
- 小波变换和motion信号处理(二)(转)
写的太好,这是第二篇:http://www.kunli.info/2011/02/18/fourier-wavelet-motion-signal-2/ 这是<小波变换和motion信号处理&g ...
- javascript 如何判断一个对象的类型
<!DOCTYPE html> <html> <head> </head> <body> <script type="tex ...