table布局的使用场景----等高布局

参考链接: 为何对有display: table的元素设置margin不起作用

table布局有两个特性：

• 同行等高
• 宽度自动调节

   
大人。

    其实我觉得大家别问元芳，元芳不是神人，

    也不会武功，也许还是个智障，

    我就不信我在这里黑元芳

    他会突然飞檐走壁来到我身后

    把我的头按在键盘上


    
我和左边等高
 

效果图

设置几个div的样式为table-cell，那么这几个div会被视作类似表单的同一行几个td, 有相同的高度，并且无缝相接。 并且！！！设置了table-cell后的元素，再设置margin是没有用的！！因为margin对table不起作用！！！

如果希望有缝相接，请务必按照如下结构

     
    

          
我是左边栏目
     
          
 
              我是自适应的右边
 
              哈哈哈
         
          
       
    

那么得到的视图如下：

爷爷元素使用separate后的效果图.png

发现木有，使用table布局，可以轻松解决等高布局的问题。如果需要间距，则对爷爷元素使用border-collapse:separate和border-spacing:10px;便可以。