一个纯Spring项目中在JSP页面上用JSTL标签实现10X10图片矩阵

疯飞 2010-03-01 11:57:12
<c:forEach items="${list}" var="list">
<tr>
<td><img src="http:<c:out value="${list.url}"/>/<c:out value="${list.name}"/>" height="100px" width="100px"/><br></td>
<td><c:out value="${photoType}"/></td>
<td><c:out value="${list.username}"/></td>
<td>暂无</td>
<td><a href="<c:url value="photo.man"><c:param name="method" value="deletePhoto" /><c:param name="url" value="${url}" /><c:param name="uid" value="${list.uid}" /><c:param name="name" value="${list.name}" /><c:param name="pageNo" value="${pageNo}" /><c:param name="type" value="${type}" /></c:url>">删除</a></td>
</tr>
</c:forEach>
</c:if>

<c:if test="${type ne '1'}">
<c:forEach items="${list}" var="list">
<tr>
<td><img src="http:<c:out value="${list.url}"/>/<c:out value="${list.name}"/>" height="100px" width="100px"/><br></td>
<td><c:out value="${photoType}"/></td>
<td><c:out value="${list.username}"/></td>
<td> <c:out value="${list.dateline}"/></td>
<td><a href="<c:url value="photo.man"><c:param name="method" value="deletePhoto" /><c:param name="url" value="${url}" /><c:param name="uid" value="${list.uid}" /><c:param name="name" value="${list.name}" /><c:param name="username" value="${username}" /><c:param name="pageNo" value="${pageNo}" /><c:param name="type" value="${type}" /></c:url>">删除</a></td>
</tr>
</c:forEach>

需要修改输出成一个10 X 10的图片矩阵显示,大家能给点意见吗谢谢了。
...全文
87 1 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
1 条回复
切换为时间正序
请发表友善的回复…
发表回复
  • 打赏
  • 举报
回复
如果使用 UL LI 的话,只要放入 100 个就能显示出 10 行 10 列。

下面这个例子用 UL LI 排出 5 * 5 的图片。

<!DOCTYPE html 
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title> new document </title>
</head>

<style type="text/css">
#photos { width:500px; margin:0; padding:0; }
#photos li { float:left; width:20%; list-style-type:none; margin:5px 0; }
#photos img { border:1px solid gray; width:80%; height:80%; }
</style>

</script>

<body>
<ul id="photos">
<li><img src="https://mail.google.com/mail/help/images/logo2.gif"></li>
<li><img src="https://mail.google.com/mail/help/images/logo2.gif"></li>
<li><img src="https://mail.google.com/mail/help/images/logo2.gif"></li>
<li><img src="https://mail.google.com/mail/help/images/logo2.gif"></li>
<li><img src="https://mail.google.com/mail/help/images/logo2.gif"></li>
<li><img src="https://mail.google.com/mail/help/images/logo2.gif"></li>
<li><img src="https://mail.google.com/mail/help/images/logo2.gif"></li>
<li><img src="https://mail.google.com/mail/help/images/logo2.gif"></li>
<li><img src="https://mail.google.com/mail/help/images/logo2.gif"></li>
<li><img src="https://mail.google.com/mail/help/images/logo2.gif"></li>
<li><img src="https://mail.google.com/mail/help/images/logo2.gif"></li>
<li><img src="https://mail.google.com/mail/help/images/logo2.gif"></li>
<li><img src="https://mail.google.com/mail/help/images/logo2.gif"></li>
<li><img src="https://mail.google.com/mail/help/images/logo2.gif"></li>
<li><img src="https://mail.google.com/mail/help/images/logo2.gif"></li>
<li><img src="https://mail.google.com/mail/help/images/logo2.gif"></li>
<li><img src="https://mail.google.com/mail/help/images/logo2.gif"></li>
<li><img src="https://mail.google.com/mail/help/images/logo2.gif"></li>
<li><img src="https://mail.google.com/mail/help/images/logo2.gif"></li>
<li><img src="https://mail.google.com/mail/help/images/logo2.gif"></li>
<li><img src="https://mail.google.com/mail/help/images/logo2.gif"></li>
<li><img src="https://mail.google.com/mail/help/images/logo2.gif"></li>
<li><img src="https://mail.google.com/mail/help/images/logo2.gif"></li>
<li><img src="https://mail.google.com/mail/help/images/logo2.gif"></li>
<li><img src="https://mail.google.com/mail/help/images/logo2.gif"></li>
</ul>
</body>
</html>


如果需要一行显示 10 个,那就把 CSS 中 #photos li 的 width 改为 10%,#photos 的宽度也可以加大。

UL LI 的话,可以很方便地使用 c:forEach 输出。

81,122

社区成员

发帖
与我相关
我的任务
社区描述
Java Web 开发
社区管理员
  • Web 开发社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧