英文:
How to limit number of displayed items in flexbox?
问题
我希望每行只有6个项目，而不要在下一行出现另外6个。因此计划是在一行中显示6个项目，并添加一个按钮“查看更多”或其他内容，该按钮将带用户前往另一个页面，显示所有项目。\n\n这是我的代码：
<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;
}
我应该怎么做？
英文:
I want to have only 6 items in one row, i don't want another 6 in next row. So the plan is to show 6 items in one row and button see more or something that will take user to another page where all items will be displayed.
This is my code:
<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>
and css:
.flex-div{
padding: 20px;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
What should i do?
答案1
得分: 1
flexbox本身不会在达到一定数量时停止，这个问题需要通过你的其他语言来解决。看起来你正在使用我不熟悉的JSP，但你必须仅提供flexbox 6个项目，然后在flexbox之后使用(if-else)来检查项目计数是否超过6，如果是的话，显示“显示更多”，除此之外，CSS无法执行这样的逻辑。
英文:
flexbox will not stop at a certain number by itself, this problem needs a solution by your other language, it seems you are using JSP which im not familiar with, but you have to provide the flexbox only 6 items, and then do and (if-else) after flexbox to check if your items count is above 6, then you show "show more" other than that, css can't do logic like that.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论