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

放飞自由

年轻人,如果三年的时间里,没有任何想法,他这一生,就基本这个样子,没有多大改变。

 
 
 

日志

 
 

CSS让display:table分页展示(图片、文字)变得更简单  

2011-06-20 12:31:20|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

用过display:table的兄弟们都是知道它的分页是一行一行循环出来的,如果要换一种展示风格就显的有些"笨重",这里介绍一下我在项目中遇到的问题和解决方法

//gTable:表格样式,gTh:表格th样式,goodsList:从后台传到页面的数据集合 [code lang="html"] ${xxxxxx[1] } ${xxxxxx[2] } [/code] 转换成html: [code lang="html"]
表格标题1 表格标题2
aaaaaaaaaa bbbbbbbbbb
cccccccccc dddddddddd
[/code]

另外,在table下面还会生成一系列数字连接即分页的连接(它以什么形式出现取决与你在disp如果你在配置文件里写的是table型的这里就是一个table,如果采用div的话这里就是一个div形式的)

下面开始分页的另类用法介绍用法: 我想让表格显示为以下类型:
姓名:Grow up diary1
性别:男
年龄:23
姓名:Grow up diary2
性别:男
年龄:23
姓名:Grow up diary3
性别:男
年龄:23
姓名:成长日记1
性别:男
年龄:23
姓名:成长日记2
性别:男
年龄:23
姓名:成长日记3
性别:男
年龄:23
我们知道每个td中都是一条记录,按照上面display生成的格式这里是无法完成的,现在有一下方案: 方案一: 我们知道数据集合是保存在requestScope.goodsList中的,我们就可以采用 [code lang="html"] 111222 [/code] 这种方式循环输出(struts1、struts2都无所谓)这样格式就可以随你定义了,你可能会说display:table不是还会生成一个表格和分页连接的东西吗,怎么办? 其实,这样写就行了

标签里什么都不写,这样就不会影响分页连接的出现,让后采用CSS将这个table隐藏掉不用我多少了吧,注意不要用jQuery在页面加载时候隐藏,当网速很慢的时候会影响展示效果!! ps:这个方案比较“淫荡”,我也没有办法,又要保持分页的风格统一,又有时间限制,我不得不想出这样的损招!!

方案二: [code lang="css"] .container{ border:1px solid green; margin-left:auto; margin-right:auto; text-align:left; width:957px; } ul { width:960px;} ul li{ list-style:none; width:112px; height:100px; positive:relative; float:left; margin:2.5px; border:1px solid green; } [/code] [code lang="html"]
  • 姓名:name1
    性别:男
    年龄:23
  • 姓名:name1
    性别:男
    年龄:23
  • 姓名:name1
    性别:男
    年龄:23
  • 姓名:name1
    性别:男
    年龄:23
  • 姓名:name1
    性别:男
    年龄:23
  • 姓名:name1
    性别:男
    年龄:23
  • 姓名:name1
    性别:男
    年龄:23
  • 姓名:name1
    性别:男
    年龄:23
  • 姓名:name1
    性别:男
    年龄:23
  • 姓名:name1
    性别:男
    年龄:23
  • 姓名:name1
    性别:男
    年龄:23
  • 姓名:name1
    性别:男
    年龄:23
  • 姓名:name1
    性别:男
    年龄:23
  • 姓名:name1
    性别:男
    年龄:23
  • 姓名:name1
    性别:男
    年龄:23
  • 姓名:name1
    性别:男
    年龄:23
  • 姓名:name1
    性别:男
    年龄:23
  • 姓名:name1
    性别:男
    年龄:23
  • 姓名:name1
    性别:男
    年龄:23
  • 姓名:name1
    性别:男
    年龄:23
[/code] ps:只要你div[container]和li的宽度合适你就可以很轻松的展示出你要的效果
  评论这张
 
阅读(67)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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