css - 如何为嵌入式 h :panelGroup 设置指定宽度

Question

该页面有一个 h:panelGrid，其中包含两个 h:panelGroup，预计将显示在同一行。

额外的要求是左边的面板组应该是总宽度的30%，其他的70%。

我尝试了几种方法来实现这一点，但都失败了......

<h:form id="form">
            <h:panelGrid id="pricePanel" columns="2" style="width:100%;" columnClasses="columnClazz" rowClasses="rowClazz">
                <h:panelGroup>
                    <p:dataTable scrollHeight="250"  id="priceData" var="item" value="#{accumByCustomerViewModel.quoteInfo}" 
                    scrollable="true" rowIndexVar="rowInfo" rowKey="#{item.brand_code}" selection="#{accumByCustomerViewModel.selectedBrand}" selectionMode="single">
                        <p:ajax event="rowSelect" listener="#{accumByCustomerViewModel.onRowSelect}"
                                update=":form:custGrid"/>   
                        <p:columnGroup id="columnGroup" type="header">
                            <p:row>
                                <p:column id="goldHeader" rendered="true" headerText="积存金" colspan="4"/>
                            </p:row>
                             <p:row>
                                <p:column id="brandHeader" rendered="true" headerText="品牌"/>
                                <p:column id="quoteDateHeader" rendered="true" headerText="报价日期"/>
                                <p:column id="salePriceHeader" rendered="true" headerText="卖出价"/>
                                <p:column id="redeemPriceHeader" rendered="true" headerText="赎回价"/>
                            </p:row>
                        </p:columnGroup>
                        <p:column id="brand_code" rendered="true">
                            #{item.brand_name}
                        </p:column>
                        <p:column id="quote_date" rendered="true">
                            #{item.quote_date} 
                        </p:column>
                        <p:column id="salePrice" rendered="true">
                           #{item.entity_sale_price}
                        </p:column>.
                        <p:column id="redeemPrice" rendered="true">
                            #{item.entity_redeem_price}
                        </p:column>
                    </p:dataTable>
                </h:panelGroup>
                <h:panelGroup id="custGrid">
                    <p:fieldset legend="客户信息" id="custFieldset">
                        <h:panelGrid columns="2">
                            <h:outputText value="银行账号:"/>
                            <p:inputText value="#{accumByCustomerViewModel.custInfo.bank_acc}" style="color:red;font-weight:bold;"/>
                            <h:outputText value="证件类型: "/>
                            <h:outputText value="#{accumByCustomerViewModel.custInfo.cert_type}" style="color:red;font-weight:bold;"/>
                            <h:outputText value="证件号码: "/>
                            <h:outputText value="#{accumByCustomerViewModel.custInfo.cert_no}" style="color:red;font-weight:bold;"/>
                        </h:panelGrid>
                    </p:fieldset>
                    <p:fieldset legend="品牌" id="brandFieldset">
                        <h:panelGrid columns="2">
                            <h:outputText value="品牌名称:"/>
                            <h:outputText value="#{accumByCustomerViewModel.selectedBrand.brand_name}" style="color:red;font-weight:bold;"/>
                            <h:outputText value="金额: "/>
                            <p:inputText value="#{accumByCustomerViewModel.selectedBrand.entity_sale_price}" style="color:red;font-weight:bold;"/>
                        </h:panelGrid>
                    </p:fieldset>
                </h:panelGroup>
            </h:panelGrid>
        </h:form>

Answer 1

声明您的 <h:panelGroup>在<h:panelGrid>作为

<h:panelGroup style="width: 30%;" layout="block">
<h:panelGroup style="width: 70%;" layout="block">

所以它们被渲染为 <div> s，没有它，它们将呈现为 <span>因此，它们不保持宽度。它对我有用。

在您的情况下:

我使用了以下代码:

    <style>
        .one{width: 70%; border: 1px solid red;}
        .two{width: 30%; border: 1px solid red;}
    </style>

    <h:panelGrid id="pricePanel" columns="2" style="width:100%;" columnClasses="one, two">      
            <h:panelGroup layout="block">
               <table style="width:100%;">
                <tr>
                    <td>kuba</td>
                    <td>kuba</td>
                    <td>kuba</td>
                    <td>kuba</td>
                    <td>kuba</td>
                    <td>kuba</td>
                </tr>
                <tr>
                    <td>kuba</td>
                    <td>kuba</td>
                    <td>kuba</td>
                    <td>kuba</td>
                    <td>kuba</td>
                    <td>kuba</td>
                </tr>
                <tr>
                    <td>kuba</td>
                    <td>kuba</td>
                    <td>kuba</td>
                    <td>kuba</td>
                    <td>kuba</td>
                    <td>kuba</td>
                </tr>            
               </table>                  
            </h:panelGroup>             
            <h:panelGroup id="custGrid" layout="block">             
                <p:fieldset legend="客户信息" id="custFieldset">
                    <h:panelGrid columns="2">
                        <h:outputText value="银行账号:"/>
                        <p:inputText value="#{accumByCustomerViewModel.custInfo.bank_acc}" style="color:red;font-weight:bold;"/>
                        <h:outputText value="证件类型: "/>
                        <h:outputText value="#{accumByCustomerViewModel.custInfo.cert_type}" style="color:red;font-weight:bold;"/>
                        <h:outputText value="证件号码: "/>
                        <h:outputText value="#{accumByCustomerViewModel.custInfo.cert_no}" style="color:red;font-weight:bold;"/>
                    </h:panelGrid>
                </p:fieldset>
                <p:fieldset legend="品牌" id="brandFieldset">
                    <h:panelGrid columns="2">
                        <h:outputText value="品牌名称:"/>
                        <h:outputText value="#{accumByCustomerViewModel.selectedBrand.brand_name}" style="color:red;font-weight:bold;"/>
                        <h:outputText value="金额: "/>
                        <p:inputText value="#{accumByCustomerViewModel.selectedBrand.entity_sale_price}" style="color:red;font-weight:bold;"/>
                    </h:panelGrid>
                </p:fieldset>                    
            </h:panelGroup>
        </h:panelGrid>

得到这样的输出:

仔细看看这部分代码:columnClasses="one, two"