table實現等高的優點

實現左右兩端等高佈局的方法，常見的方法有負margin。

負margin有一個缺點，好比實現下圖樣式：

一行三列等高佈局，經過負margin徹底能實現，但難點在於每一列的底部有陰影（box-shadow）。因爲採用負margin，須要將父級設置overflow：hidden,所以底部的陰影將消失。除此以外，全部須要在底部渲染的都會出問題，好比背景圖在底部，若採用負margin，則底部背景圖是沒法看到的。這是致命缺點。

如今所要實現的效果是：一行三列，寬度平分，自適應，等高，且實現陰影。

若是沒有實現陰影要求，徹底能夠經過負margin+width:33.33333%實現，如今則不能。

table自己就是等高的，且不須要overflow:hidden，所以陰影也能實現。同時table有fixed佈局，即固定等分佈局，這樣就實現了。

假設html：結構以下

<div class="wrap">
  <div class="column">第一列，內容不定</div>
  <div class="column">第二列，內容不定</div>
  <div class="column">第三列，內容不定</div>
</div>

給父級和列設置樣式：

.wrap{
  display:table;
  table-layout:fixed;
  border-collapse:separate;
  border-spacing:15px 0;
  width:100%;
}
.column{
  display:table-cell;
  box-shadow:  0px 10px 20px #888888; 
}

table-layout：fixed是實現等分的關鍵。單元格的寬度默認是根據單元格中的內容自動調整的，設置了這個樣式，則單元格的寬度不是根據內容自動調整，而是根據指定的寬度顯示，若單元格內容超過指定寬度，則換行顯示。這裏咱們沒有指定寬度，則默認是平分每一個單元格的寬度，這點真特麼是太好用了。

border-spacing:15px 0;默認單元格是緊挨着的，但咱們採用table的佈局用於一行三列的顯示，固然不但願三列緊挨着，彼此有15px的間距。這個樣式就解決了緊挨着的問題，單元格左右有15px的間距，上下爲0。比較惋惜的是，這個樣式只能設置水平和垂直的間距，不能單獨設置上右下左的間距，這也是沒辦法的，由於咱們這裏是討巧，用table的佈局實現咱們想要的效果，而不是實現真正的表格。