布局神器display:table-cell

 

 

元素两端对齐

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

    

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 26 27 28 29

* {      box-sizing: border-box; } .content {      display : table;      border :  1px  solid  #06c ;      padding :  15px  5px ;      max-width :  1000px ;      margin :  10px  auto ;      min-width :  320px ;      width :  100% ; } .box {      width :  100px ;      height :  100px ;      border :  1px  solid  #ccc ;      text-align :  center ;      display : inline- block ;      font-size :  40px ;      line-height :  100px ; } . right  {      text-align :  right ;      display :  table-cell } . left  {      text-align :  left ;      display :  table-cell }

　

1 2 3 4 5 6 7 8

< div  class="content">      < div  class="left">          < div  class="box">B</ div >      </ div >      < div  class="right">          < div  class="box">A</ div >      </ div > </ div >

　　

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

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

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

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 26 27 28

* {      box-sizing: border-box; }   .content {      display : table;      border :  1px  solid  #06c ;      padding :  15px  5px ;      max-width :  1000px ;      margin :  10px  auto ;      min-width :  320px ;      width :  100% ; } .content ul {      display : table;      width :  100% ;      padding :  0 ;      border-right :  1px  solid  #ccc ; }   .content ul li {      display :  table-cell ;      border :  1px  solid  #ccc ;      text-align :  center ;      height :  100px ;      border-right :  none ;      line-height :  100px ; }

　　

1 2 3 4 5 6 7 8 9

< div  class="content">      < ul >          < li >1</ li >          < li >2</ li >          < li >3</ li >          < li >4</ li >          < li >5</ li >      </ ul > </ div >

　　

图片垂直居中于元素

 

1 2 3 4 5

< div  class="content">      < div  class="img-box">          < img  src="http://jsfiddle.net/img/logo@2x.png" alt="logo" />      </ div > </ div >

　　

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

* {      box-sizing: border-box; }   .content {      display : table;      border :  1px  solid  #06c ;      padding :  15px  5px ;      max-width :  1000px ;      margin :  10px  auto ;      min-width :  320px ;      width :  100% ; } .img-box{      height :  150px ;      width :  100px ;      border : 1px  solid  red ;      display :  table-cell ;      vertical-align :  middle ;      text-align :  center ;      background-color : #4679bd ; }

　　

两box实现等高对齐

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

1 2 3 4 5 6 7 8

< div  class="content">      < div  class="img-box">          < img  src="http://jsfiddle.net/img/logo@2x.png" width="70" alt="logo" />      </ div >      < div  class="text-box">          < span >王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。</ span >      </ div > </ div >

　　

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

* {      box-sizing: border-box; } .content {      display : table;      border :  1px  solid  #06c ;      padding :  15px  5px ;      max-width :  1000px ;      margin :  10px  auto ;      min-width :  320px ;      width :  100% ; } .img-box{      width :  100px ;      border : 1px  solid  red ;      display :  table-cell ;      vertical-align :  middle ;      text-align :  center ;      background-color : #4679bd ; } .text-box{      margin-left :  20px ;      border :  1px  solid  #ddd ;      padding :  10px ; }

　　

上面的案例不对右侧的box设置display:table-cell，只对左侧设置，所以就会出现左侧跟随右侧高度变化而变化。

如果要实现不管两个box哪个高度产生变化另一个就跟随，只需要把右侧的box也设置成display:table－cell就可以实现了。

 

弹性、响应式布局

1 2 3 4 5 6 7 8 9

< div  class="content">          < div  class="left-box">              < img  src="https://www.google.com.hk/images/srpr/logo11w.png" width="70" alt="logo" />           </ div >                    < div  class="right-box">              < span >王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。王尼玛和陈尼玛都是年轻有为的骚年，有一天他们相遇了，然后发现都对对方一见钟情后，所以就愉快的生活在了一起。。。。。</ span >          </ div >      </ div >

　　

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

* {      box-sizing: border-box; } .content {      display : table;      border :  1px  solid  #06c ;      padding :  15px  5px ;      max-width :  1000px ;      margin :  10px  auto ;      min-width :  320px ;      width :  100% ; } .left-box {      float : left ;      margin-right :  10px ;      padding-top : 5px ; }   .right-box {      display :  table-cell ;      padding :  10px ;      border :  1px  solid  #ccc ;      margin-right :  10px ;      vertical-align :  top ; }

　　

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

转载于:https://www.cnblogs.com/wangking/p/11353024.html