Html 基于数据大小显示常规列和行_Html_Css_Jsf

Html 基于数据大小显示常规列和行

html css jsf

Html 基于数据大小显示常规列和行,html,css,jsf,Html,Css,Jsf,我有个小问题。我想在屏幕上每行显示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" x

我有个小问题。我想在屏幕上每行显示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>


JSF教程！
#{helloWorld.getMessage（）}
#{user.address}

我希望随着数据大小的增加，每行可以显示4乘4

附言：我不允许使用引导

感谢您的帮助。

尝试在CSS中添加以下行：

float: left;

我希望能在某种程度上有所帮助

尝试在CSS中添加以下内容：

float: left;

我希望能在某种程度上提供帮助

您是否尝试过用

包装

并使用

列

属性指定列数。

您是否尝试过用

包装

并使用

列

属性指定列数。

使用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>


#{user.address}

我不得不说我没有尝试过这个代码，所以我不知道它是否有效，但希望它能帮助你

使用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>


#{user.address}

我不得不说我没有尝试过这个代码，所以我不知道它是否有效，但希望它能帮助你

简单地添加float永远不会给您带来任何好处columns@JasperdeVries是正确的。。。再加上一个只在第n个div中应用这个选项的选择器，你也可以把它们放在媒体查询中，因此根据屏幕的实际情况，一行上显示4、6或例如10。简单地添加float永远不会给你任何提示columns@JasperdeVries是正确的。。。再加上一个只在第n个div中应用此选项的选择器，您也可以将其放入媒体查询中，因此根据屏幕实际情况，一行显示4、6或10