0

看起来很简单，但我做不到。我需要显示一系列图像，每行 3 个。例如，如果我的集合中有 9 个元素，它应该在 3 x 3 的表格中显示 9 个图像。我正在尝试使用此代码：

     <h:form>
        <ice:panelGrid columns="3">
            <ui:repeat var="user" value="#{indexBean.users}" >
                <ice:panelGrid columns="1">
                    <ice:graphicImage value="#{user.picture}"/>
                    <ice:outputText value="#{user.name}"/>
                </ice:panelGrid>
            </ui:repeat>
        </ice:panelGrid>
    </h:form>

但是，我得到的不是一张 3 列的有序表，而是一张图片。我可以让所有项目水平排列，css: display:inline但线不是从 3 个元素切割到 3 个元素。我得到一个包含所有元素的“无限”行。

请帮忙？谢谢！

4

2 回答 2

1

代替

<ice:panelGrid columns="1">

尝试使用

ice:panelGroup

编辑：根据评论

正在讨论几乎类似的问题

于 2012-04-16T04:16:52.133 回答
1

我找到了解决方案。使用 DIV 作为生成 trugth ui:repeat 的数据的容器。这是示例：

.panel_users {
    width:600px;
    height:400px;
    background-color:lightskyblue;
    margin:10px;
    overflow: auto;
    float:left;
}

 <h:form>
    <div class="panel_users">
        <ui:repeat var="user" value="#{indexBean.users}" >
            <ice:panelGrid columns="1" style="float: left;">
                <ice:graphicImage value="#{user.picture}"/>
                <ice:outputText value="#{user.name}"/>
            </ice:panelGrid>
        </ui:repeat>
    </div>
</h:form>

style="float: left;"在 panelGrid 中使它们水平对齐很重要。对不起我的英语不好 ：-）

于 2012-04-16T13:23:03.757 回答