[英]Panel grid layout in PrimeFaces
我想要一個<p:panelGrid>
(或<h:panelGrid>
)的布局,如下面的快照所示。
以下代碼,
<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>
顯示如下快照所示的布局。
如何實現第一次拍攝中顯示的布局?
<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列,因此需要向它們添加第二列。
希望這會把它搞清楚一點。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.