我能把JQuery UI布局置于列中心吗？

Question

我是JQuery UI的新手，已经成功实现了基本示例，其中布局延伸到页面的边缘。我想要的是这种布局，但内容在一个居中列中，并且可以在每个侧面看到背景颜色。因此，我添加了一个带有一些非常简单的CSS的外部div，如下所示:

.frame
{
   width:900px; 
   margin:0 auto;
}

<div class="frame">
    <div class="ui-layout-north">
    </div>
    <div class="ui-layout-center">
    </div>
    <div class="ui-layout-east">
    </div>
    <div class="ui-layout-west">
    </div>
    <div class="ui-layout-south">
</div>

哎呀，与普通div不同，我得到了一个弹出窗口，上面写着：

UI布局初始化错误

中心面板元素不存在。

中心面板是必需的元素

为什么会这样，我该如何修复？

提前感谢您的帮助，记住，我可能犯了一个非常新手的错误。 :)

- Brandi

Answer 1

也许您仍在将 layout() 应用于文档主体：

$("body").layout({
    // options...
});

在这种情况下，布局引擎无法找到面板元素，因为它们不在 body 中。解决方案是将 layout() 应用于您的包装器 <div> 元素：

$("div.frame").layout({
    // options...
});

- Frédéric Hamidi

Answer 2

根据您的最终目标，您可能希望尝试反转此过程 - 将将居中布局的div放置在#ui-layout-center内，并为其设置margin: 0 auto;。

- egid