css - div 的 JSF/XHTML/CSS 'tableview'

Question

我目前正在尝试迭代一个将生成 <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 一样。

Answer 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>在 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="&lt;/div&gt;&lt;div&gt;" escape="false" rendered="#{not loop.first and loop.index % 3 == 0}" />
        <div>#{item}</div>
    </ui:repeat>
</div>

另见:

• JSTL in JSF2 Facelets... makes sense?
• JSF 2 ui:repeat: group every n items inside a div