Question

看起来很简单，但我不能这样做。我需要显示一系列图像，每行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个元素切割。我得到了所有元素的“无限”线。

请帮忙吗？谢谢！

Answer 1

而不是

<ice:panelGrid columns="1">

尝试使用

ice:panelGroup

编辑：根据评论

几乎类似的问题是discussed

Answer 2

我找到了解决方案。使用DIV作为生成数据的容器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>

panelGrid中的重要style="float: left;"是水平的。对不起我的英文： - ）

在JSF中显示水平动态内容

2 个答案: