1

我目前正在尝试迭代一个列表，该列表将为<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 相同的问题。

4

1 回答 1

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>

也可以看看：

于 2012-11-14T11:28:31.407 回答