Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

模拟表格 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>
网名:
3.84.186.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^