div 的 JSF/XHTML/CSS 'tableview'答案

【问题标题】：JSF/XHTML/CSS 'tableview' of divsdiv 的 JSF/XHTML/CSS 'tableview'
【发布时间】：2012-11-02 10:36:21
【问题描述】：

我目前正在尝试遍历一个列表，该列表将为每个值生成一个<div>(...)</div>。这些 div 将表示为“块”（如下图所示）。问题是，我需要它们排列成一行（所以新行从前一行的最低点开始）。

在每行使用一个容器 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 相同的问题。

【问题讨论】：

正在更改外部 div 以跨越一个选项？
是否有不使用表的语义原因？这很容易通过<h:panelGrid> 和<c:forEach> 的组合来实现。否则你真的不能很好地绕过容器 div 来表示一行。
难以置信这是多么容易，我完全忘记了<h:panelGrid>。这确实是我一直在寻找的标签。如果不作为评论发布，我会接受这个作为答案。

标签： css jsf jsf-2

【解决方案1】：

是否有不使用表格的语义原因？这很容易通过<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> 在视图构建期间运行，并在物理上有效地生成多个<h:panelGroup> 组件，因此它们正确地以每个<h:panelGrid> 的单元格结束。使用 <ui:repeat> 时它不会起作用，因为它仅在视图渲染期间运行，并且在视图构建期间有效地作为 <h:panelGrid> 的单个单元格结束。

如果有不使用表格的强大且有效的语义理由，那么您真的不能很好地绕过容器 <div> 来表示一行。

<div>
    <ui:repeat value="#{bean.items}" var="item" varStatus="loop">
        <h:outputText value="&lt;/div&gt;&lt;div&gt;" escape="false" rendered="#{not loop.first and loop.index % 3 == 0}" />
        <div>#{item}</div>
    </ui:repeat>
</div>

另见：

【讨论】：