注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

左岸

web前端

 
 
 

日志

 
 

模拟表格 inline-block等高布局  

2014-06-11 14:55:47|  分类: 实例 |  标签: |举报 |字号 订阅

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


<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;
}
.aa{ background:#960}
</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>
  评论这张
 
阅读(64)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017