模拟表格 inline-block等高布局

表格是个好东西，它可以自动根据内容来调整格子，确保数据正常显示，并且不破坏表格的结构。但也有一些劣势，因为是用大量标签堆砌而成，页面结构会比较乱，细节也往往不容易控制。所以我们希望有表格的展示效果，但不想用表格，于是就有了模拟表格。
对于HTML中的同级数据，我们更希望把它们放到一起。所以UL、LI的结构可以满足需求，UL就是整个表格，LI就是我们的单元格。对LI元素设置display:inline-block，让其并行排列。然后要让元素像表格一样就需要设置适当的宽度，比如下面的例子使用33.33%，也就是每行显示3个单元格。注意还需要同时将box-sizing设置为border-box，因为我们可能需要边框或padding之类的东西，且不能影响到整个单元格的宽度。最后使用等高布局，对元素设置上很大数值的padding-bottom和负margin-bottom，让单元格的高度超过行盒子，为了让水平边框不因为单元格高度不等而参差不齐。这样，整个布局就完成了。它有点类似表格，内容可以撑开单元格高度。对于要确保数据显示却不想用表格布局的场景可以考虑使用它。

运行<style>
ul {
  width:260px;overflow:hidden;
  border-right:1px solid #CCC;
  border-bottom:1px solid #CCC;
  margin:0px;padding:0px;
  font-size:0px;
}
li {
  box-sizing:border-box;
  width:33.33%;
  display:inline-block;
  vertical-align:top;
  padding-bottom:999px;
  margin-bottom:-999px;
  border-left:1px solid #CCC;
  border-top:1px solid #CCC;
  font:14px/1.75 Simsun;
}
</style>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>无论单个格子里面有多少文字，即使换行也不会影响整个布局。</li>
  <li></li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
</ul>