參考鏈接: 為何對(duì)有display: table的元素設(shè)置margin不起作用

table布局有兩個(gè)特性：

• 同行等高
• 寬度自動(dòng)調(diào)節(jié)

<style type="text/css"> 
   .classtd {
        display:table-cell;
        padding:30px; 
        border:1px solid #ccc;
    }
</style>
<div class="classtd">
   <p>大人。<br />
    其實(shí)我覺得大家別問(wèn)元芳，元芳不是神人，<br />
    也不會(huì)武功，也許還是個(gè)智障，<br />
    我就不信我在這里黑元芳<br />
    他會(huì)突然飛檐走壁來(lái)到我身后<br />
    把我的頭按在鍵盤上</p>
</div>
<div class="classtd">
    <p>我和左邊等高</p>
</div> 

效果圖

設(shè)置幾個(gè)div的樣式為table-cell，那么這幾個(gè)div會(huì)被視作類似表單的同一行幾個(gè)td, 有相同的高度，并且無(wú)縫相接。 并且?。。≡O(shè)置了table-cell后的元素，再設(shè)置margin是沒有用的??！因?yàn)?code>margin對(duì)table不起作用?。?！

如果希望有縫相接，請(qǐng)務(wù)必按照如下結(jié)構(gòu)

<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"> 
              我是自適應(yīng)的右邊<br> 
              哈哈哈<br>         
          </div>       
    </div>
</div>

那么得到的視圖如下：

爺爺元素使用separate后的效果圖.png

發(fā)現(xiàn)木有，使用table布局，可以輕松解決等高布局的問(wèn)題。如果需要間距，則對(duì)爺爺元素使用border-collapse:separate和border-spacing:10px;便可以。