css - 如何使用h:panelGrid将rich:panelMenu的rich:outputPanel顶层化？

对于上述问题该怎么办，我将不胜感激。大致可以这样分解：
我已经实现了动态创建的rich:panelMenu，并且按照RichFaces演示，将a4j:outputPanel放在其右边，以包含当用户单击菜单中的项目时将出现的内容。代码是：

            <h:form>
                <a4j:region id="logs">
                    <h:panelGrid columns="2" border="0" style="width: 100%; margin: auto;">
                        <rich:panel header="Menu">
                            <rich:panelMenu mode="ajax" style="width: 300px">

                                <!-- feed iteration -->
                                <c:forEach items="#{MyBacking.panelNodes}" var="map">
                                    <rich:panelMenuGroup label="#{map.key}"
                                        style="padding-left: 10px;">
                                        <c:forEach items="${map.value}" var="entry">
                                            <rich:panelMenuItem label="#{entry}"
                                                style="padding-left: 20px;"
                                                action="#{MyBacking.updateCurrent}">
                                                <f:param name="current" value="#{entry}" />
                                            </rich:panelMenuItem>
                                        </c:forEach>
                                    </rich:panelMenuGroup>
                                </c:forEach>
                            </rich:panelMenu>
                        </rich:panel>
                        <rich:panel header="Content">
                            <a4j:outputPanel ajaxRendered="true" layout="inline"
                                style="vertical-align: top">
                                <h:outputText value="#{MyBacking.current}" id="current" />
                            </a4j:outputPanel>
                        </rich:panel>
                    </h:panelGrid>
                </a4j:region>
            </h:form>

[请注意，a4j:outputPanel具有CSS可以尝试将其垂直对齐到顶部，但是包含的rich:panel主要是我关注的焦点]

问题是：

1：我希望两个组件水平对齐，以便两个组件的顶部都水平。我使用了h:panelGrid来尝试控制菜单和outputPanel，但是即使它呈现了一个表，vertical-align似乎也不起作用。
我认为它可能最终会被应用到错误的位置，因此将不起作用（例如包含的跨度-尽管理论上应该开放另一个元素内的元素以通过此属性进行控制）。

 <h:panelGrid columns="2" border="0"    style="width: 100%; margin: auto;">

也不起作用。我至少在正确的轨道上吗？由于右侧面板将包含文件的内容，因此它将比panelMenu长得多。我需要防止panelMenu向下滑动到outputPanel的左侧（垂直对齐的中间，这就是现在发生的情况）。

2：我想用px修复panelMenu宽度，但是如果菜单最后包含的条目太长，我注意到溢出似乎已固定为隐藏。我似乎无法让overflow: auto工作。我只需要一个水平。在这种情况下滚动条。

3：panelGrid必须是其包含的选项卡的宽度的100％。我听说h:panelGrid width:100%会引起问题，所以如果仍然如此，我该如何解决呢？

我希望这是有道理的。我已经使用css一段时间了，但事实证明，将我想要的东西强制放入RF组件比我想象的要棘手得多。

非常感谢

最佳答案

第1点：使用<h:panelGrid columns="2" border="0" style="width: 100%" columnClasses="cols, cols">
然后在您的CSS中指定cols类。多次指定它将应用于连续的列。它在documentation中，但在其示例中未引用。