如何使用CSS将列的内容设置为顶部而不是中的中心？

Question

我有一个panelGrid，有一些列，但内容的一栏总是在中心，我怎么不能把它放在顶端。我有两个栏目，当它们的内容不一样的高度，在栏目将停留在中心，如此糟糕。Tks求救！

Answer 1

您需要在生成的HTML<td>元素上将CSS vertical-align属性设置为top。假设您希望在整个页面中将其应用于整个<p:panelGrid>，那么应该这样做：

.ui-panelgrid td {
    vertical-align: top;
}

或者，如果只希望将其应用于特定的<p:panelGrid>，请执行以下操作：

<p:panelGrid ... styleClass="aligned-top">

使用

.ui-panelgrid.aligned-top td {
    vertical-align: top;
}

或者，如果您只想将其应用于特定的<p:panelGrid>列(例如，第二列)，那么请执行以下操作：

<p:panelGrid ... columns="3" columnClasses="none,aligned-top,none">

使用

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

另请参阅：

• How do I override default PrimeFaces CSS with custom styles?