[英]Panel grid layout in PrimeFaces
I want a layout of <p:panelGrid>
(or <h:panelGrid>
) as shown in the following snap shot. 我想要一个
<p:panelGrid>
(或<h:panelGrid>
)的布局,如下面的快照所示。
The following code, 以下代码,
<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>
shows the layout as shown in the following snap shot. 显示如下快照所示的布局。
How can I achieve the layout as shown in first snap shot? 如何实现第一次拍摄中显示的布局?
<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>
Explanation: 说明:
Each row will try to place itself under the previous row where there is space for it (where a column is not spanning over multiple rows). 每一行都会尝试将自己置于前一行(其中有空间)(其中一列不跨越多行)。
So after the first row: the next rows will be placed in the following positions: 所以在第一行之后:接下来的行将被放置在以下位置:
But since you want the 6th and 7th row to have 2 columns, you need to add a second column to them. 但是,由于您希望第6行和第7行有2列,因此需要向它们添加第二列。
Hopefully this clears it up a little. 希望这会把它搞清楚一点。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.