!DOCTYPEHTMLhtmlheadmetacharset="UTF-8"linkrel="stylesheet"href="dijit/themes/soria/soria.css"styletype="text/css"html,body{height:100%;margin:0;overflow:hidden;padding:0;}#appLayout{height:100%;}#leftCol{width:120px;}.claro.demoLayout.edge
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="dijit/themes/soria/soria.css">
<style type="text/css">
html,body{
height: 100%;
margin: 0;
overflow: hidden;
padding: 0;
}
#appLayout{
height: 100%;
}
#leftCol{
width: 120px;
}
.claro .demoLayout .edgePanel{
background-color: #d0e9fc;
}
</style>
<script type="text/javascript" src="dojo/dojo.js" djConfig="parseOnLoad:true"></script>
<script type="text/javascript">
</script>
<title>GridContainer学习</title>
</head>
<body class="soria">
<div class="demoLayout" style="height: 300px; width: 300px" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design: 'headline'">
<div class="demoLayout" style="height: 50%" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region: 'top', splitter: true, design: 'headline'">
<div class="centerPanel" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'center'">center</div>
<div class="edgePanel" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'bottom'">bottom</div>
</div>
<div class="centerPanel" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'center'">center</div>
<div class="edgePanel" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="splitter: true, region: 'left'">left</div>
<div class="demoLayout" style="width: 50%" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region: 'right', design: 'headline'">
<div class="centerPanel" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'center'">center</div>
<div class="edgePanel" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'left'">left</div>
</div>
<div class="edgePanel" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="splitter: true, region: 'bottom'">bottom</div>
</div>
<!-- load dojo and provide config via data attribute -->
<script src="dojo/dojo.js" data-dojo-config="async:true, parseOnLoad:true"></script>
<script>
require(["dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/parser"]);
</script>
</body>
</html>
输出：
650) this.width=650;" src="http://img.558idc.com/uploadfile/allimg/210615/195555K29-2.png" title="快照6.jpg" alt="wKioL1RAoVby9mxUAAH0c9EEqlg137.jpg" d="3714150" s="1a8_23e" t="jpg">