使用apex：panelGrid div标签内部导致文本显示在Div之外

Question

我正在尝试在2010年12月左右的Salesforce演示文稿中实现此Developing Applications with jQuery video的后半部分中展示的拖放。

我已经有了它的工作但是我在将一个顶点：panelGrid放在div标签内时遇到了问题。

当我在div标签内部使用apex：panelGrid时，我实际上有一个与嵌入文本分开的框。该框表现我想要的方式，但来自apex：outputLabel和apex：outputField的文本在框外，没有拖放。它适用于上面的视频，但不在我的页面上。

当我用HTML表替换整个apex：panelGrid时，整个事情就像我想要的那样，就像在视频中一样。

我假设自视频制作以来多年来发生了一些变化，但我无法弄清楚是什么或为什么。

有什么想法吗？

以下是代码的整个顶点：PageBlock部分。目前，HTML表已被注释掉，但您可以看到两种不同的尝试。

<apex:PageBlock title="Installed Widgets" mode="edit" id="installBlock">
    <apex:pageBlockSection columns="1" id="section">
        <apex:repeat value="{!installedWidgets}" var="w">
            <!-- <div class="widget" data-id="{!w.Id}" style="{!IF(w.Status__c == 'Maintenance Required','border-radius: 10px','border-radius: 5px')}">-->
            <div class="widget" data-id="{!w.Id}">
                <!-- This does not work and places a box that is separate from the embedded text. The box has the behavior I want, but the text is outside the box.-->
                <!--<apex:panelGrid columns="2" columnClasses="label,value">
                    <apex:outputLabel value="{!$ObjectType.Widget__c.fields.Name.label}"/>
                    <apex:outputField value="{!w.Name}"/>
                    <apex:outputLabel value="{!$ObjectType.Widget__c.fields.Status__c.label}"/>
                    <apex:outputField value="{!w.Status__c}"/>
                    <apex:outputLabel value="{!$ObjectType.Widget__c.fields.Serial_Number__c.label}"/>
                    <apex:outputField value="{!w.Serial_Number__c}"/>
                </apex:panelGrid>-->
                <!-- This HTML table does what I want it to. -->
                <table>
                <tr>
                    <td class="label">{!$ObjectType.Widget__c.fields.Name.label}</td>
                    <td class="value">{!w.Name}</td>
                </tr>
                <tr>
                    <td class="label">{!$ObjectType.Widget__c.fields.Status__c.label}</td>
                    <td class="value">{!w.Status__c}</td>
                </tr>
                <tr>
                    <td class="label">{!$ObjectType.Widget__c.fields.Serial_Number__c.label}</td>
                    <td class="value">{!w.Serial_Number__c}</td>
                </tr>
                </table>
            </div>
        </apex:repeat>
    </apex:pageBlockSection>
</apex:PageBlock>