Блог

Главная - Вопросы по программированию - Отображение общих столбцов и строк в зависимости от размера данных

Отображение общих столбцов и строк в зависимости от размера данных

#html #css #jsf

#HTML #css — файл #jsf ( СПС ) #css #jsf

Вопрос:

У меня есть небольшая проблема. Я хочу отобразить на своем экране по 4 столбца в строке, проблема в том, что данные генерируются из цикла.

Вот мой код

привет.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.

Спасибо вам за помощь.

Ответ №1:

Попробуйте добавить в свой CSS следующую строку:

 float: left;

Я надеюсь, что это каким-то образом помогло

Комментарии:

1. Простое добавление float никогда не даст вам столбцов

2. @JasperdeVries прав… Добавьте это в сочетании с селектором, который применяет это только к каждому n-му div. И вы также можете поместить их в медиа-запросы, чтобы в зависимости от экранной недвижимости отображалось 4, 6 или, например, 10 в строке.

Ответ №2:

Вы пробовали обернуть свой <ui:repeat> с помощью <h:panelGrid> и указать количество столбцов, используя 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>

Я должен сказать, что я не пробовал этот код, поэтому я не знаю, сработал ли он, но надеюсь, что это поможет вам!