PrimeFaces中的面板网格布局

Question

我想要一个<p:panelGrid>（或<h:panelGrid>）的布局，如following快照片所示。

以下代码，

<p:panelGrid style="width: 100%;">
    <p:row>
        <p:column rowspan="9">a</p:column>
        <p:column rowspan="7">b</p:column>
        <p:column>c</p:column>
    </p:row>

    <p:row><p:column>d</p:column></p:row>
    <p:row><p:column>e</p:column></p:row>
    <p:row><p:column>f</p:column></p:row>
    <p:row><p:column>g</p:column></p:row>
    <p:row><p:column>h</p:column></p:row>
    <p:row><p:column>i</p:column></p:row>
    <p:row><p:column>j</p:column></p:row>
    <p:row><p:column>k</p:column></p:row>
</p:panelGrid>

显示following快照中显示的布局。

如何实现第一次拍摄中显示的布局？

Answer 1

        <p:panelGrid style="width: 100%;">
            <p:row>
                <p:column rowspan="7">a</p:column>
                <p:column rowspan="5">b</p:column>
                <p:column>e</p:column>
            </p:row>

            <p:row>
                <p:column>f</p:column>
            </p:row>

            <p:row>
                <p:column>g</p:column>
            </p:row>

            <p:row>
                <p:column>h</p:column>
            </p:row>

            <p:row>
                <p:column>i</p:column>
            </p:row>

            <p:row>
                <p:column>c</p:column>
                <p:column>j</p:column>
            </p:row>

            <p:row>
                <p:column>d</p:column>
                <p:column>k</p:column>
            </p:row>

        </p:panelGrid>

说明：

每一行都会尝试将自己置于前一行的位置，在该行中有空间（其中一列不跨越多行）。

所以在第一行之后：接下来的行将被放置在以下位置：

但是由于你希望第6行和第7行有2列，你需要为它们添加第二列。

希望这有点清除它。