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

【问题标题】：Display generic columns and rows based on data Size根据数据大小显示通用列和行
【发布时间】：2016-10-23 23:04:45
【问题描述】：

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

PS：我不允许使用引导程序。

感谢您的帮助。

【问题讨论】：

标签： html css jsf

【解决方案1】：

尝试在您的 CSS 中添加以下行：

float: left;

我希望能在某些方面有所帮助

【讨论】：

简单地添加浮点数永远不会给你列
@JasperdeVries 是正确的...将其与仅在每个第 n 个 div 中应用此选项的选择器结合使用。您也可以将这些放在媒体查询中，这取决于屏幕空间、4、6 或例如连续显示 10 个

【解决方案2】：

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

【讨论】：

【解决方案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>

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

【讨论】：