文档章节

布局神器display:table-cell

大橙子zc
 大橙子zc
发布于 2016/03/22 10:46
字数 1046
阅读 56
收藏 1

随 着时间的推进,ie6、ie7在中国浏览器市场的占有率越来越低的情况,我现在工作的团队,经过用户访问数据,得知ie6、ie7的用户已经非常少的前提 下,决定不在兼容ie6、ie7。正式在这个激动人心的决定后,让我对display:table-cell;这个属性有了更加深入的应用和理解。在 ie8还必须兼容的pc端,它绝对是一个现代的布局神器。


        我并不喜欢用float来做布局,因为它触发的问题比较多,例如要清除浮动,元素浮动后还会导致该元素脱离文档流,即使你清除float,该元素依旧是脱离文档流。


        在 需要兼容ie6、ie7的时代我也尽量避免使用float来布局,左右布局能用display:inline-block;布局我就用它来布局,但是还是 无法完全不使用它,很多布局例如需要靠左和靠右的布局场景下就没办法不去使用float来布局。我现在切页面很少会去在ie下查看效果,大部分是通过 chrome来进行调试的,等整个页面切好了,再用ie过一遍页面,大部分时候页面是没什么太多兼容问题,这或许多年来工作累积的经验使我写代码时避开了 一些兼容坑,也可能是自己对盒模型摸索许久以来的一些经验。


    废话不多说,下面直接看demo例子,好可以快速爱上display:inline-block;


元素两端对齐

    第一个案例是让两个元素分别向左和向右对齐,如果是过去,我一定会用float来实现,但其实用table可以这么做:

    

DEMO1



自动平均划分每个小模块,使其一行显示

第二个案例我们先看看图:

        遇 到上面这种布局,一般会用float来做,或者把每个li设置成display:inline-block;来做,并且都要设置给他们设置一个宽度,而且 最痛苦的是5个li如果你设置width:20%;他们一定会掉下来,如果li都设置成display:table-cell;就不会出现这种情况,即使 不设置宽度他们也会在一行显示,你在加多一行他也不会掉下来,依旧会在一样显示。DEMO2

    

图片垂直居中于元素

        有时候我们需要让图片垂直水平都居中于某个元素,用常规写法比较复杂,但用table-cell则相对简单:DEMO3


两box实现等高对齐

        上图中的左侧的box的高度始终跟随右侧的box的高度变化而变化:DEMO4


        上 面的案例我故意不对右侧的box设置display:table-cell,只对左侧,所以就会出现左侧跟随右侧高度变化而变化,如果要实现不管两个 box哪个高度产生变化另一个就跟随,只需要把右侧的box也设置成display:table-cell就可以实现了。


弹性、响应式布局

        上 面的demo中大家只要改变浏览器宽度就会发现他们其实都是会随高度变化自动变化高度的,其实上面内容我大部分没有设置绝对单位,即使设置了也只设置其中 一个box另一个就让他去自适应父元素的剩余留下来的宽度,其实布局的时候设置宽度是一件很痛苦的事情,因为除了大量计算有时候可能在多浏览器下还算不 准,可能你在chrome设好的宽度在ie下就坑爹了,要写hack才能解决。最后一个案例,据不靠谱的传言faceboox曾经也这么使用过:DEMO5

 

        移动端布局因为有display:box这等属性,所以table-cell相对就排不上什么大用场,不过在移动端你要用table-cell也不是不可以,根据自己对属性的理解去使用就可以了。


转载请注明来自                                                            520UED                                                                                                                            http://www.520ued.com/article/table-cell                                                                                    


本文转载自:http://www.520ued.com/article/table-cell

大橙子zc
粉丝 0
博文 19
码字总数 2899
作品 0
程序员
私信 提问
布局神器(一)display:table-cell

display:table-cell 页面布局是HTML+CSS的一个重点,除了常见的几种布局外,如:float、position: absolute等等;还有一些功能强大且好用的布局方式,本文就display:table-cell做学习总结...

即将离
2016/07/17
0
0
display:table-cell介绍

[图片上传失败...(image-2969e4-1516190383083)] 页面布局是HTML+CSS的一个重点,除了常见的几种布局外,如:float、position: absolute等等;还有一些功能强大且好用的布局方式,本文就dis...

bug_killer
2018/01/17
0
0
布局神器display:table-cell

元素两端对齐 第一个案例是让两个元素分别向左和向右对齐,如果是过去,我一定会用float来实现,但其实用table可以这么做: HTML: CSS: 自动平均划分每个小模块,使其一行显示 第二个案例我...

CharmyZ
2016/07/20
64
0
我所知道的几种display:table-cell的应用

一、display:table-cell属性简述 display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签。目前IE8+以及其他现代浏览器都是支持此属性 的,但是IE6/7只能对你说sorry了,这...

林文安
2012/05/30
224
0
Web前端面试指导(十五):CSS样式-display有哪些作用?

题目点评 其实就是要你说清楚该属性有哪些值,每个值都有什么作用,这个题目可以答得很简单,但要答全也并非是一件容易的事情。 元素默认的display值的情况如下(这个一般很少人注意这一点)...

智学无忧1
2017/05/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Taro 兼容 h5 踩坑指南

最近一周在做 Taro 适配 h5 端,过程中改改补补,好不酸爽。 本文记录📝遇到的问题,希望为有相同需求的哥们👬节约点时间。 Taro 版本:1.3.9。 解决跨域问题 h5 发请求会报跨域问题,需...

dkvirus
44分钟前
3
0
Spring boot 静态资源访问

0. 两个配置 spring.mvc.static-path-patternspring.resources.static-locations 1. application中需要先行的两个配置项 1.1 spring.mvc.static-path-pattern 这个配置项是告诉springboo......

moon888
今天
2
0
hash slot(虚拟桶)

在分布式集群中,如何保证相同请求落到相同的机器上,并且后面的集群机器可以尽可能的均分请求,并且当扩容或down机的情况下能对原有集群影响最小。 round robin算法:是把数据mod后直接映射...

李朝强
今天
4
0
Kafka 原理和实战

本文首发于 vivo互联网技术 微信公众号 https://mp.weixin.qq.com/s/bV8AhqAjQp4a_iXRfobkCQ 作者简介:郑志彬,毕业于华南理工大学计算机科学与技术(双语班)。先后从事过电子商务、开放平...

vivo互联网技术
今天
19
0
java数据类型

基本类型: 整型:Byte,short,int,long 浮点型:float,double 字符型:char 布尔型:boolean 引用类型: 类类型: 接口类型: 数组类型: Byte 1字节 八位 -128 -------- 127 short 2字节...

audience_1
今天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部