嘗試使用BorderContainer（dojo）的結構

Question

我想要一個BorderContainer，如圖片，頂部有兩個ContentPane，底部有一個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> 

通常情況下，中心區將抓住所有額外的空間，當你調整窗口，但您可以在前導/頂部/尾部/底部區域上設置相對寬度/高度，以便始終使用該屏幕份額。

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>