<h:panelGrid> 的设计问题

Question

我有一个对齐面板网格内的组件的代码，我在下面给出

      <h:panelGrid columns="2" styleClass="table width100P"
                        columnClasses="width50P, width50P">
                        <h:panelGrid columns="3"
                            columnClasses="leftColb, rightColb,rightColb"
                            styleClass="infoTable">
        // FIRST set of items which will be displayed in the first row since the panel grid column is "3".
            <h:outputLabel value="PAT # :" />
            <h:outputLabel value="PAT # :" />
 //THE BELOW IS AN DUMMY LABEL TO FULFILL THE PANEL GRID
                 <h:outputLabel value="PAT # :" /> 



        // SECOND set of items which will be displayed in the SECONDE row since the panel grid column is "3".
            <h:outputLabel value="PAT # :" />
            <h:outputLabel value="PAT # :" />
             //THE BELOW IS AN DUMMY LABEL TO FULFILL THE PANEL GRID
                 <h:outputLabel value="PAT # :" /> 



        //THIRD SET OF items which will be displayed in the THIRD row since the panel grid column is "3".
            <h:outputLabel value="PAT # :" />


     //FOURTH SET OF items which will be displayed in the FouRHT row since the panel grid column is "3".
            <h:outputLabel value="PAT # :" />


        </h:panelGrid>
        </h:panelGrid>

CSS For the leftColb, rightColb,rightColb,width100P given below 

 .infoTable TD {
        padding: 1px 2px;
        border-width: 1px 0px 1px 0px;
        border-color: #ddd;
        border-style: solid;
        vertical-align: top;
    }

    .leftColb {
        text-align: right;
        font-weight: bold;
        width: 50%;
    }

    .rightColb {
        text-align: left;
        font-weight: normal;
        width: 50%;
    }

.width50P {
    width: 50%;
}

.width100P {
    width: 100%;
}

我的问题是因为第三组和第四组只有一个<h:outputLabel>，第四组中的第一项跳转到第三行以填充面板网格，因为它期望连续三个组件和第五项跳到第三行进行统计。

当该行仅包含两个组件时，我尝试在第三行中插入一个“DUMMY”以实现面板网格，但是另一组行具有 2 或 3,4 个动态呈现的组件，这使得对齐难度更大。

由于面板网格允许连续三个项目。我正在尝试平衡每一行中的组件。尽管其余行组件是动态生成的。

我在下面给出的屏幕截图的 PFA。

我该如何解决这个问题？

Answer 1

您的列由p:panelGrid（或在上面的示例中为h:panelGrid）的默认行为布置，并带有一组编号的列。网格中包含的每个组件都将从左到右、从上到下进行布局。

如果您想更好地控制去向，请使用p:row 和p:column 来帮助定义网格结构。在 PanelGrid 下的 PrimeFaces Showcase 中提供了有关如何完成此操作的一个很好的参考。