display:table-cell应用

display:table-cell简述

使用了display:table-cell的元素设置margin值无效，但padding值是有效的，所以如果要在设置了table-cell的元素上应用margin，需要再包裹一层元素。另外如果设置了display:table-cell的元素的父元素不是display:table-row，父元素的父元素不是display:table，那么浏览器会自动创建相应的匿名元素，使得DOM层次结构符合table/inline-table>table-row>table-cell三层嵌套关系，这就是”匿名创建表格元素规则”。

利用display:table-cell创建等高布局

table表格中每一行单元格都等高，设置了display:table-cell的一组元素也有同样的特点。

利用display:table-cell创建两栏自适应布局

Bootstrap中的输入框组就使用了table-cell来实现两栏自适应。

其中input-add-on的宽度设置为1%，这是一个CSS Hack。我们可以看到input-group-addon的宽度为34px，这个单元格的宽度为整个表格宽度的1%，所以设置了display:table的元素的width为34*100px，因为table元素的最大宽度不能超过其父元素的宽度，同时浏览器会保证所有的设置table-cell的元素的宽度总和等于table元素的宽度，这样就实现了输入框元素的宽度自适应。

利用display:table-cell创建等宽布局

 

具体代码如下：

HTML：

1 2 3 4 5 6 7 8 9

< div  id="wrapper">      < ul  class="lists">          < li  class="item">< a  href="#">One</ a ></ li >          < li  class="item">< a  href="#">Two</ a ></ li >          < li  class="item">< a  href="#">Three</ a ></ li >          < li  class="item">< a  href="#">Four</ a ></ li >          < li  class="item">< a  href="#">Five</ a ></ li >      </ ul > </ div >

CSS：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

#wrapper {      width :  960px ;      margin :  100px  auto ; } .lists {      display : table;      width :  100% ;      border-collapse :  collapse ; } .lists .item {      display :  table-cell ;      width :  1% ;      text-align :  center ;      border :  1px  solid  black ; } .lists .item a {      display :  block ;      padding :  25px ;      color :  white ;      background :  gray ; } .lists .item a:hover {      color : yellow;      background :  #979797 ; }