css - 在 panelGrid 中对齐 p:dataList 组件

Question

我正在尝试对齐 panelGrid 中的两个列表由于一个列表比另一个列表短，因此我将在面板和较短的列表顶部之间留出空间。

我只想对齐面板顶部之间没有空间，并且它们都将具有相同的宽度（50%、50%）

 <h:panelGrid columns="2" >
    <p:dataList value="#{disBean.productList}" var="prod" itemType="circle"> 
        <f:facet name="header">p</f:facet>
        <p:column>#{prod.name} </p:column>
        <p:column>#{prod.Version}</p:column>
    </p:dataList>
    <p:dataList value="#{disBean.custList}" var="cust" itemType="circle"> 
        <f:facet name="header">c</f:facet>
        <p:column>#{cust.name} </p:column>
        <p:column>#{cust.Version}</p:column>
    </p:dataList>   
</h:panelGrid>

我尝试使用 css（不在此示例中），但没有找到正确的组合。

任何例子都会很棒

谢谢

Answer 1

您需要将 CSS属性vertical-align设置top为由. 您可以通过属性设置它，该属性采用逗号分隔的字符串和 CSS 样式类名称，应按顺序应用于每个元素。<td><h:panelGrid>columnClasses<td>

所以，这应该做，

<h:panelGrid ... columnClasses="align-top, align-top">

有了这个 CSS

.align-top {
    vertical-align: top;
}