在页面重构中,我们经常会需要实现多栏布局,例如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 多栏自适应布局的更多相关文章

  1. css多栏自适应布局

    css多栏自适应布局还是需要总结一下的,都是基本功. 一般使用position属性布局,或者用float属性布局,也可以使用display属性. 看资料说position适合首页布局,因为首页内容往往 ...

  2. CSS 三栏自适应布局

    CSS布局 这个很基础,方法也很多,要留意的知识点还是有一些. 比如IE6的触发layout  *zoom:1 比如使用浮动后的清除浮动  clear:both 需求的延伸也会有一些: 比如三栏等高 ...

  3. CSS 3栏自适应布局

    绝对定位 css html,body{margin: 0px;height:100%;} div{height: 100%;} .left,.right {top: 0px;position: abs ...

  4. 【转】CSS深入理解流体特性和BFC特性下多栏自适应布局

    这篇文章发布于 2015年02月12日,星期四,23:36,归类于 css相关. 阅读 30873 次, 今日 63 次 by zhangxinxu from http://www.zhangxinx ...

  5. CSS深入理解流体特性和BFC特性下多栏自适应布局

    一.块状元素的流体特性与自适应布局 块状元素像放在容器中的水流一样,内容区域会随着margin, padding, border的出现自动填满剩余空间,这就是块状元素的流体特性. 来一个小实验: di ...

  6. css实现等高布局 两栏自适应布局 三栏自适应布局

    等高布局: HTML结构如下: <div class="wrapper"> <div class="box"> <h1>.. ...

  7. 你知道BFC、IFC、FFC、GFC及多栏自适应布局吗?

    FC(Formatting Context)格式化内容,常见的FC有BFC.IFC.FFC.GFC四种类型,BFC和IFC是W3C CSS2.1规范提出的概念,FFC和GFC是W3C CSS3规范提出 ...

  8. css布局 - 两栏自适应布局的几种实现方法汇总

    这种两列布局的样式是我们在平时工作中非常常见的设计,同时也是面试中要求实现的高频题.很有必要掌握以备不时之需: 整理了几种实现方法,当然,风骚的代码不止这几种能实现,欢迎各位的补充. 方法汇总目录 简 ...

  9. 使用CSS实现三栏自适应布局(两边宽度固定,中间自适应)

    来源:http://blog.csdn.net/cinderella_hou/article/details/52156333 所谓三列自适应布局指的是两边定宽,中间block宽度自适应.这道题在今年 ...

随机推荐

  1. Mater Nginx(2) - A Configuration Guide

    The basic configuration format Nginx global configuration parameters Using include files The HTTP se ...

  2. 【 D3.js 选择集与数据详解 — 3 】 绑定数据的顺序

    data() 函数有两个参数,第一个是被绑定数据,第二个参数用于指定绑定的顺序.在数据需要更新的时候常常会用到. 默认的情况下,data()函数是按照索引号依次绑定数组各项的.第0个元素绑定数组的第0 ...

  3. Xcode 不提示, 引用失效等情况

    在编写xcode的项目的时候出现过代码不高亮的症状,而且所有的warning都不再提示,include的内容也显示symbol not found,非常奇怪,解决方案如下: 方法一: 1.把.pch里 ...

  4. kafka的安装和使用

    简单说kafka是一个高吞吐的分部式消息系统,并且提供了持久化. kafka的架构 • producer:消息生存者• consumer:消息消费者• broker:kafka集群的server,负责 ...

  5. C++之编码问题(Unicode,ASCII,本地默认)

    本篇文章试图回答的问题: 1.char* pStr="我aa";这句代码执行后,pStr指向的内存区域中存储的字节到底是根据什么码表而来的呢?该字符串占几个字节? 2.将一个VS2 ...

  6. 五指cms标签说明汇总

    1.栏目列表标签 只有一级导航: {wz:content action="category" cid="0" pagesize="100" ...

  7. 微软Azure的多媒体编码服务示例

    这篇文章是介绍 Azure 媒体服务编程系列之一.以前的主题是如何: 获得媒体处理器. 为服务器上的媒体内容,可以对内容与大量的媒体编码和格式使用 Azure Media 编码器进行编码.您还可以使用 ...

  8. HDOJ-ACM1097(JAVA) A hard puzzle

    这道题就是HDOJ的1061的变形: 1061 :求n的n次方的个位数 http://www.cnblogs.com/xiezie/p/5596779.html 1097 :求n的m次方的个位数 因此 ...

  9. 第4章 类型基础 -- 4.1 所有类型都从System.Object派生

    4.1 所有类型都从System.Object派生 “运行时”要求每个类型最终都从System.Object类型派生. 由于所有类型最终都从System.Object派生,所以每个类型的每个对象都保证 ...

  10. ORA-01653:表空间扩展失败的问题(开启表空间自动扩展)

    ----查询表空间使用情况---使用DBA权限登陆SELECT UPPER(F.TABLESPACE_NAME) "表空间名",D.TOT_GROOTTE_MB "表空间 ...