Question

我正在使用JSF 2.2开发Web Java应用程序。和PrimeFaces 6.0。我想构建一个p:panelGrid，其p:column - 具有特定大小，但在这一刻，所有p:column - s都具有相同的width，我该如何定义一个特定的大小和响应？？

这是我的全部代码：

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:a="http://xmlns.jcp.org/jsf/passthrough"
      xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">
    <h:head>
        <title>TSPSupport - Principal</title>
    </h:head>
    <h:body>
        <p:panelGrid>
            <f:facet name="header">
                <p:row>
                    <p:column rowspan="1" colspan="12">
                        A
                    </p:column>
                </p:row>
            </f:facet>

            <p:row>
                <p:column rowspan="1" colspan="12">
                    B
                </p:column>
            </p:row>
            <p:row>
                <p:column rowspan="1" colspan="5">
                    C
                </p:column>
                <p:column rowspan="1" colspan="2">
                    D
                </p:column>
                <p:column rowspan="1" colspan="5">
                    E
                </p:column>
            </p:row>
            <p:row>
                <p:column rowspan="1" colspan="5">
                    F
                </p:column>
                <p:column rowspan="1" colspan="2">
                    G
                </p:column>
                <p:column rowspan="1" colspan="5">
                    H
                </p:column>
            </p:row>

        </p:panelGrid>
    </h:body>
</html>

这样的页面：

我希望p:column - C，F，E和H占41.666％和p:column - D和G的s将占16.666％，100％等于12。

谢谢！

Answer 1

您只有3列。定义html属性只是为了得到“预期的视图”并不是最好的做法。应该使用CSS。

解决方案：

<style type="text/css">
    .col-12 {
        width: 100%;
    }

    .col-5 {
        width: 41.666%;
    }

    .col-2 {
        width: 16.666%;
    }
</style>

<p:panelGrid styleClass="col-12">
    <f:facet name="header">
        <p:row>
            <p:column colspan="3" styleClass="col-12">
                A
            </p:column>
        </p:row>
    </f:facet>

    <p:row>
        <p:column colspan="3" styleClass="col-12">
            B
        </p:column>
    </p:row>
    <p:row>
        <p:column styleClass="col-5">
            C
        </p:column>
        <p:column styleClass="col-2">
            D
        </p:column>
        <p:column styleClass="col-5">
            E
        </p:column>
    </p:row>
    <p:row>
        <p:column styleClass="col-5">
            F
        </p:column>
        <p:column styleClass="col-2">
            G
        </p:column>
        <p:column styleClass="col-5">
            H
        </p:column>
    </p:row>
</p:panelGrid>

如何使用p：panelGrid创建我的个人发行版？

1 个答案: