布局神器display:table-cell

布局神器display:table-cell

 

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

 

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

 

        在须要兼容ie六、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