尝试使用BorderContainer（dojo）的结构

Question

我想要像图片一样的BorderContainer，顶部有两个ContentPane，底部有一个，但我不能用区域做，所以我不知道是否有办法与地区合作。

谢谢

Answer 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>

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

Answer 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>