在视觉力页面中使用列

Question

我有一个收入明细的记录字段。我需要我的列看起来像图片中的那样，这是我将显示的代码，但我需要将左列中的收入分类放在右列的底部。大约两天后，我对此还很陌生，所以我可以使用我能得到的所有帮助当我尝试时，我遇到错误，例如页面块项目下不能超过两个子元素。任何帮助都会很棒

<apex:page standardController="EventPackageRevenueBreakdown__c"
extensions="EventPackageRevenueBreakdownExt" standardStylesheets="true"
tabstyle="EventPackageRevenueBreakdown__c">
<apex:form >
    <apex:pageBlock mode="edit"
        title="Event Package Revenue Breakdown Edit">
        <apex:pageblockbuttons >
            <apex:commandbutton action="{!save}" value="{!$Label.Package_Save}"></apex:commandbutton>
            <apex:commandbutton action="{!SaveAndNew}"
                value="{!$Label.Package_SaveAndNew}"></apex:commandbutton>
            <apex:commandbutton action="{!cancel}"
                value="{!$Label.Package_Cancel}"></apex:commandbutton>
        </apex:pageblockbuttons>
        <apex:pagemessages ></apex:pagemessages>
        <apex:pageblocksection id="PackageEventInformationPBS"
            title="{!$Label.Package_Information}">
            <apex:pageBlockSectionItem >
                <apex:outputpanel layout="block" styleClass="requiredInput"></apex:outputpanel>
            </apex:pageBlockSectionItem>
            <apex:outputpanel layout="block" styleClass="requiredBlock"></apex:outputpanel>
            <apex:inputfield required="true"
                value="{!EventPackageRevenueBreakdown__c.UnitPrice__c}"></apex:inputfield>
            <apex:inputfield required="true"
                value="{!EventPackageRevenueBreakdown__c.Location__c}"></apex:inputfield>
            <apex:inputfield required="true"
                value="{!EventPackageRevenueBreakdown__c.Name}"></apex:inputfield>
            <apex:outputfield value="{!EventPackageRevenueBreakdown__c.BookingPackageEvent__c}" />
                                <apex:inputfield required="true"
                value="{!EventPackageRevenueBreakdown__c.RevenueClassification__c}"></apex:inputfield>
        </apex:pageblocksection>
        <apex:pageblocksection title="Admin and Gratuity">
            <apex:pageBlockSectionItem >
                <apex:outputpanel layout="block" styleClass="requiredInput"></apex:outputpanel>
            </apex:pageBlockSectionItem>
            <apex:outputpanel layout="block" styleClass="requiredBlock"></apex:outputpanel>
            <apex:inputfield required="false"
                value="{!eventItem.AdminCharge__c}"></apex:inputfield>
            <apex:inputfield required="false" value="{!eventItem.Gratuity__c}"></apex:inputfield>
        </apex:pageblocksection>
    </apex:pageBlock>
</apex:form>

Answer 1

如果 pageBlockSection 设置为两列（我相信是默认设置），那么它会按左->右布局，然后向下一行，然后再左->右布局。

要将字段推到上方，您可以添加一个空的 pageBlockSectionItem

您应该像这样布置您的字段：

<apex:pageblocksection id="PackageEventInformationPBS" title="{!$Label.Package_Information}" columns="2">
    <apex:inputfield required="true" value="{!EventPackageRevenueBreakdown__c.UnitPrice__c}"/>
    <apex:inputfield required="true" value="{!EventPackageRevenueBreakdown__c.Location__c}"/>
    <apex:inputfield required="true" value="{!EventPackageRevenueBreakdown__c.Name}"/>
    <apex:outputfield value="{!EventPackageRevenueBreakdown__c.BookingPackageEvent__c}"/>
    </apex:pageBlockSectionItem> <!-- empty selectItem--> <apex:pageBlockSectionItem/>
    <apex:inputfield required="true" value="{!EventPackageRevenueBreakdown__c.RevenueClassification__c}"/>
</apex:pageblocksection>

在视觉力页面中使用列

Using columns in a visual force page

salesforce

styling

visualforce

two-columns