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的布局实现咱们想要的效果，而不是实现真正的表格。