参考链接: 为何对有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;便可以。
