我目前正在尝试迭代一个将生成 <div>(...)</div>
的列表对于每个值。这些 div 将表示为“ block ”(如下图所示)。问题是,我需要它们排成一行(因此新行从前一行的最低点开始)。
当每行使用一个容器 div 时,这不会有问题,如下所示:
<div>
<div>(...)</div>
<div>(...)</div>
<div>(...)</div>
</div>
<div>
<div>(...)</div>
<div>(...)</div>
<div>(...)</div>
</div>
虽然我不想使用容器 div,因为我需要在我的 <ui:repeat>(...)</ui:repeat>
中使用某些逻辑添加</div><div>
在每三个条目上。
我也在 JSF 下发布这个,因为我希望 JSF(或 PrimeFaces 或 Tomahawk)有一个合适的解决方案.不过,如果一个简单的 CSS 技巧 就足够了,那将是完美的。
希望你能帮我解决这个问题。
注意:使用表格的解决方案对我没有帮助,因为使用 <tr>(...)</tr>
会遇到同样的问题。与我上面描述的容器 div 一样。
最佳答案
不使用表格有语义上的原因吗?这很容易通过组合 <h:panelGrid>
实现。和 <c:forEach>
.
<h:panelGrid columns="3">
<c:forEach items="#{bean.items}" var="item">
<h:panelGroup>#{item}</h:panelGroup>
</c:forEach>
</h:panelGrid>
之所以这样是因为 <c:forEach>
在 View 构建期间运行并有效地生成物理上的多个 <h:panelGroup>
组件,以便它们正确地结束每个作为 <h:panelGrid>
的单元格.使用 <ui:repeat>
时它不会起作用,因为它仅在 View 渲染期间运行,并且有效地作为 <h:panelGrid>
的单个单元格结束。在 View 构建期间。
如果有一个强大而有效的语义理由不使用表,那么你真的不能很好地绕过一个容器 <div>
代表一行。
<div>
<ui:repeat value="#{bean.items}" var="item" varStatus="loop">
<h:outputText value="</div><div>" escape="false" rendered="#{not loop.first and loop.index % 3 == 0}" />
<div>#{item}</div>
</ui:repeat>
</div>
另见:
关于css - div 的 JSF/XHTML/CSS 'tableview',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13370230/