标签：style http color 使用 数据 ar html line
表格是个好东西，它可以自动根据内容来调整格子，确保数据正常显示，并且不破坏表格的结构。但也有一些劣势，因为是用大量标签堆砌而成，页面结构会比较乱，细节也往往不容易控制。所以我们希望有表格的展示效果，但不想用表格，于是就有了模拟表格。
对于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>
模拟表格 inline-block等高布局,布布扣,bubuko.com
标签：style http color 使用 数据 ar html line
原文地址：http://www.cnblogs.com/axl234/p/3904875.html
