一、依赖于 Panel（面 板）组件和 resizable(调整大小)组件。
二、class加载方式
<div id="box" class="easyui-layout" style="height: 600px;width: 400px">
<div data-options="region:‘north‘" title="north" style="height: 100px;"></div>
<div data-options="region:‘south‘" title="south" style="height: 100px;"></div>
<div data-options="region:‘west‘" title="west" style="width: 100px"></div>
<div data-options="region:‘east‘" title="east" style="width: 100px"></div>
<div data-options="region:‘center‘" title="center"></div>
</div>
三、js加载方式
<div id="box" style="height: 600px;width: 400px">
<div data-options="region:‘north‘,maxHeight:‘200‘"
border=‘false‘
iconCls=‘icon-add‘
title=‘north‘
href="index.html"
collapsible="false"
style ="height: 100px;"></div>
<div data-options="region:‘south‘" title="south" style="height: 100px;"></div>
<div data-options="region:‘west‘" title="west" style="width: 100px"></div>
<div data-options="region:‘east‘" title="east" style="width: 100px"></div>
<div data-options="region:‘center‘" title="center"></div>
</div>
$(function () {
$("#box").layout({
//属性
fit:true,//如果设置为 true，布局组件将自适应父容 易。当使用 body 标签创建布局的时候，整 个页面会自动最大。默认为 false。值为boolean
});
//方法
console.log($(‘#box‘).layout(‘panel‘, ‘north‘));//返回指定面板
$(‘#box‘).layout(‘collapse‘, ‘north‘);//设置指定面板折叠,参数可用值有 ： ‘north‘,‘south‘,‘east‘,‘west‘。
$(‘#box‘).layout(‘expand‘, ‘north‘);//设置指定面板展开,参数可用值有 ： ‘north‘,‘south‘,‘east‘,‘west‘。
$(document).click(function () { $(‘#box‘).layout().css(‘display‘, ‘block‘); $(‘#box‘).layout(‘resize‘); });////重新调整布局和大小
$(‘#box‘).layout(‘add‘, { title : ‘center title‘, region : ‘center‘, });//新增一个面板
$(‘#box‘).layout(‘remove‘, ‘north‘);////删除指定面板
})
原文地址：https://www.cnblogs.com/Alaic2052243080/p/11588087.html