尝试使用 BorderContainer (dojo) 的结构答案

【问题标题】：Trying a structure with BorderContainer (dojo)尝试使用 BorderContainer (dojo) 的结构
【发布时间】：2014-12-12 18:37:48
【问题描述】：

我想要一个像图片一样的 BorderContainer，顶部有两个 ContentPane，底部有一个，但我无法对区域进行操作，所以我不知道有没有办法对区域进行操作。

谢谢

【问题讨论】：

标签： dojo contentpane border-container

【解决方案1】：

这在一定程度上取决于您在调整窗口大小时希望窗格如何缩放。你想让底部窗格占据所有额外的高度吗？您希望前两个窗格保持 50/50 的宽度吗？

假设您希望空间的分割在宽度和高度上保持 50/50，您可以这样做：

<div data-dojo-type="dijit/layout/BorderContainer">

    <div data-dojo-type="dijit/layout/ContentPane" 
         data-dojo-props="region: 'leading'" 
         style="width: 50%">leading</div>

    <div data-dojo-type="dijit/layout/ContentPane" 
         data-dojo-props="region: 'center'">center</div>

    <div data-dojo-type="dijit/layout/ContentPane" 
         data-dojo-props="region: 'bottom'" 
         style="height: 50%">bottom</div>
</div>

通常，当您调整窗口大小时，中心区域会占用所有额外空间，但您可以在前导/顶部/尾部/底部区域设置相对宽度/高度，以便它们始终使用该屏幕份额。

【讨论】：

就是这样。我对一些概念感到困惑，所以我没有正确理解。谢谢

【解决方案2】：

我想你想要一个嵌套的边框容器。基本上，您需要一个顶部和中心（或中心和底部），并在顶部放置一个左侧和中心（或中心和右侧）。

<div data-dojo-type="dijit/layout/BorderContainer">

    <div data-dojo-type="dijit/layout/BorderContainer"
         data-dojo-props="region: 'top'" style="height: 50%">

        <div data-dojo-type="dijit/layout/ContentPane" style="width: 50%"
             data-dojo-props="region: 'left'">inner top left</div>

         <div data-dojo-type="dijit/layout/ContentPane" 
             data-dojo-props="region: 'center'">inner top center</div>
    </div>

    <div data-dojo-type="dijit/layout/ContentPane" 
         data-dojo-props="region: 'center'">outer center</div>
</div>

【讨论】：

这是一个很好的建议，嵌套布局没有错。在这种情况下，我认为它也可以更好地处理 50% 以上的边距（上窗格和下窗格保持 50%，即使非常小）。我冒昧地在您的答案中添加了一个示例。