Question

我有点问题。我想在屏幕上每行显示4列，问题是数据是从循环生成的。

这是我的代码

hello.xhtml

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:c="http://java.sun.com/jsp/jstl/core"
        xmlns:p="http://primefaces.org/ui">
    <head>
    <title>JSF Tutorial!</title>
    </head>
    <body>
        <h:inputHidden value="#{helloWorld.init()}"></h:inputHidden>
        #{helloWorld.getMessage()}
        <ui:repeat var="user" value="#{helloWorld.users}">
                <div style="border: 1px solid red; width: 10%; margin-top: 1%;">
                    <p>#{user.address}</p>
                </div>
        </ui:repeat>
    </body>
    </html>

我知道我可以在数据大小增加的情况下每行显示4乘4。

PS：我不允许使用bootstrap。

谢谢你的帮助。

Answer 1

尝试在CSS中添加以下行：

float: left;

我希望以某种方式帮助

Answer 2

您是否尝试使用<ui:repeat>包裹<h:panelGrid>并使用columns属性指定列数。

Answer 3

使用h：panelGrid，您可以在其中定义像......这样的列

<h:panelGrid columns="4" cellpadding="5" >
        <ui:repeat var="user" value="#{helloWorld.users}">
                <div style="border: 1px solid red; width: 10%; margin-top: 1%;">
                        <p>#{user.address}</p>
                </div>
        </ui:repeat>
</h:panelGrid>

我必须说我没有尝试过这段代码，所以我不知道它是否有用，但希望它可以帮到你！

根据数据大小显示通用列和行

3 个答案: