1.這里演示的分兩列展示的效果:
注意:紅色邊框是我畫出來用于提示是table區(qū)域的.
效果截圖
2.關(guān)鍵jsp代碼:
<div class="panel-body">
<c:forEach items="${itemList}" varStatus="status" begin="0" end="${itemList.size() }" step="1">
<div style="float: left;width: 45%;margin:15px;height: 190px;border-bottom:1px dashed #6292BE">
<!-- 通過設(shè)置 div的懸浮float:left,使div不致于分行顯示;
通過設(shè)置 width:45%,來確保顯示兩列,你可以設(shè)置小一點(diǎn),來讓其顯示多列;
通過設(shè)置 margin:15px,來設(shè)置各個(gè)div之間的間距;
通過設(shè)置 hight:190px,來設(shè)置每個(gè)div的高度不因?yàn)閮?nèi)容項(xiàng)目的多少而顯示高度不一致.
通過設(shè)置border-bottom:1px dashed #6292BE",使div下邊緣顯示為虛線.
-->
<table class="table-detail" cellpadding="0" cellspacing="0" border="0" type="main" width="100%" style="table-layout: fixed;border: none;">
<tr height="40">
<td style="text-align: left;color:#6292BE;font-size:16px;border-width: 0;width: 70%"><c:out value="${itemList[status.index].name}" escapeXml="true"></c:out></td>
<td style="text-align: right; border-width: 0;width: 30%">
<a href="${ctx}/smart/itemTopic/itemTopic/showMoreNewsList.ht?id=${itemList[status.index].id}" style="text-decoration:none;text-align:center;color:#3D8E4A;">MORE >>></a>
</td>
</tr>
<c:forEach items="${itemList[status.index].newsList}" var="itemNews" varStatus="status">
<tr height="30">
<td style="text-align: left;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; border-width: 0;">
<a href="${ctx}/smart/itemTopic/itemTopic/newsShow.ht?id=${itemNews.id}&returnUrl=${returnUrl}" style="text-decoration:none;text-align:center;color:#000000;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"><c:out value="${itemNews.title}" escapeXml="true"/></a>
</td>
<td style="text-align: right; border-width: 0;width: 30%"><fmt:formatDate value="${itemNews.publishTime}" pattern="yyyy-MM-dd"/></td>
</tr>
</c:forEach>
</table>
</div>
</c:forEach>
</div>
