在一個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由<h:panelGrid>產生的<td>元素。您可以通過columnClasses屬性進行設置，該屬性採用逗號分隔的字符串和CSS樣式類名稱，該名稱應按順序應用於每個<td>元素。

所以，這應該做的，

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

這個CSS

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