How to create a <div> grid using JSTL <c:forEach>?

若如初见. 提交于 2019-12-23 15:14:51

问题


I am trying to create a grid using JSTL <c:forEach>.

<c:forEach var="user" items="${userList}" step="1" begin="0">
    <div id="col1">
        <a href="#">${user.userName}</a>
    </div>
    <div id="col2">
        <a href="#">${user.userName}</a>
    </div>
    <div id="col3">
        <a href="#">${user.userName}</a>
    </div>
</c:forEach>

The output is:

user1   user1   user1
user2   user2   user2
user3   user3   user3
and so on...

But I want it to display like:

user1   user2   user3
user4   user5   user6
user7   user8   user9
and so on...

My CSS is:

#col1 {
    position: absolute;
    left: 5px;
    padding: 0px;  
}

#col2 {
    position: absolute;
    margin-left: 100px;
    padding: 0px;
}

#col3 {
    margin-left: 200px;
    padding: 0px;
}

How can I achieve this without using a table?


回答1:


You need to declare a status variable, please try:

<c:forEach var="user" varStatus="status" items="${userList}" step="1" begin="0">
  <div id="col${status.index % 3 + 1}">
    <a href="#">${user.userName}</a>
  </div>
</c:forEach>



回答2:


Try this,

<c:set var="count" value="1"/>
<c:forEach var="user" items="${userList}" step="1" begin="0">
 <c:if test="${count==4}">
   <c:set var="count" value="1"/>
 </c:if>
 <div id="col${count}">
    <a href="#">${user.userName}</a>
 </div>
 <c:set var="count" value="${count+1}"/>
</c:forEach>


来源:https://stackoverflow.com/questions/7670575/how-to-create-a-div-grid-using-jstl-cforeach

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!