如何解决如何限制flexbox中显示的项目数?
我只希望一行中只有6个项目,而我不希望下一行中有另外6个项目。因此,计划是在一行中显示6个项目,并按see more
按钮,否则将把用户带到显示所有项目的另一页。
这是我的代码:
<div class="flex-div">
<c:forEach var="book" items="${bookList}">
<div><img src="Images/book${book.imageId}.png" alt="book"
height="190px" width="150px"/></div>
<div id="book-title">${book.title}</div>
<div id="book-price">${book.price}$</div>
</c:forEach>
</div>
和CSS:
.flex-div{
padding: 20px;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
我该怎么办?
解决方法
flexbox本身不会停止在某个数量上,这个问题需要您使用其他语言的解决方案,看来您使用的JSP不熟悉,但是您只需要提供flexbox 6个项,然后执行然后在flexbox之后检查(如果是其他)项目数是否大于6,则除了显示“ show more”(显示更多)之外,css不能这样做。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。