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

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

table布局有两个特性：

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

<style type="text/css"> 
   .classtd {
        display:table-cell;
        padding:30px; 
        border:1px solid #ccc;
    }
</style>
<div class="classtd">
   <p>大人。<br />
    其实我觉得大家别问元芳，元芳不是神人，<br />
    也不会武功，也许还是个智障，<br />
    我就不信我在这里黑元芳<br />
    他会突然飞檐走壁来到我身后<br />
    把我的头按在键盘上</p>
</div>
<div class="classtd">
    <p>我和左边等高</p>
</div> 

效果图

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

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

<style type="css/text">
      .grandpa {   
         display: table; 
         border-collapse:separate;    
         border-spacing:5px;
      }
      .father {    
         display: table-row;
      }
      .classtd { 
          display: table-cell;  
          padding:10px; 
          border:1px solid #ccc;
      }
</style>
<div class="grandpa">     
    <div class="father">
          <div class="classtd">我是左边栏目</div>     
          <div class="classtd"> 
              我是自适应的右边<br> 
              哈哈哈<br>         
          </div>       
    </div>
</div>

那么得到的视图如下：

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

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