類似於Java AWT和Delphi的佈局窗格，LayoutContainer 是一個可以指定大小的框（比如style="width: 500px; height: 500px;"）, 可以包含子部件（標有layoutAlign，取值爲"left", "right", "bottom", "top", 以及 "client"）. LayoutContainer 對標有left/top/bottom/right的子部件延着框的邊排列，然後把標有“client”的子部件放在剩下的空間中間位置。
Left/right位置類似月CSs的"float: left" 和 "float: right", top/bottom位置類似於 "float: top" 和"float: bottom"。
注意只能由一個client元素，但可以有其他多個left, right, top, 或者 bottom元素。
例子
佈局容器很容易格式化表格的內容：
<script type="text/javascript">
dojo.require("dijit.layout.ContentPane"); dojo.require("dijit.layout.LayoutContainer");
dojo.require("dijit.util.parser"); // scan page for widgets and instantiate them
</script>...<div dojoType="dijit.layout.LayoutContainer" style="width: 100%; height: 100%"> <div dojoType="dijit.layout.ContentPane" layoutAlign="top" style="background-color:red"> The Dojo Book </div> <div dojoType="dijit.layout.ContentPane" layoutAlign="left" style="background-color:lightblue;width: 120px;"> Table of Contents </div> <div dojoType="dijit.layout.ContentPane" layoutAlign="client" style="background-color:yellow"> <blockquote><a href="../node/717">Introduction</a> <ol> <li><a href="../node/718">Dojo: What is It?</a></li> <li><a href="../node/719">History</a></li> <li><a href="../node/733">What Dojo Gives You</a></li>... </div></div>產生的效果:
layoutChildPriority屬性能改變繪製的順序：
- 如果值是 "top-bottom", 那麼LayoutContainer 會先沿着“top”和“bottom”，然後沿着左右來放置元素（在上下元素之間）。client元素最後放置在剩下的空間內。
- I如果值是 "left-right", 那麼LayoutContainer 會先沿着左右，然後沿着上下方向來放置元素（在左右元素之間）。client元素最後放置在剩下的空間內。
- 如果值是"none", 就會把每個元素按自然順序排列。基本上每個元素被放置在“剩餘空間”中，剩餘空間的大小初始的時候是內容區域的大小，然後隨之每個子元素的添加而重新計算剩餘的大小。
簡單的改變子元素的優先級:
<div dojoType="dijit.layout.LayoutContainer" layoutChildPriority='left-right' style="width: 100%; height: 100%">改變了繪製的順序和重疊
Dijit類型，屬性，事件和方法
|
dijit.layout.LayoutContainer
在固定的方框中沿着邊和中間放置元素.
|
|||
|
屬性
|
|||
| layoutChildPriority | top-bottom left-right none |
top-bottom | See above |
可訪問性
Author: API Docs, Craig