在 Web 程序中，页面布局对应用程序的用户体验至关重要。
在一般的信息管理类的 Web 应用程序中，页面结构通常有一个主工作区，然后在工作区上下左右靠近边界的区域设置一些边栏，用于显示信息或放置一些功能选项的控件。比如下面这两个比较典型的例子：
EasyUI 提供了一种非常简单方便的实现该效果的方法，可以让用户很方便的在页面上实现矩形区域划分的功能，这就是 EasyUI 的布局组件（Layout）。
EasyUI 布局组件Layout
EasyUI 的布局组件允许用户在一个主工作区的四周各添加一个边栏，EasyUI 将自动为用户实现边界划分和边界位置控制功能。
EasyUI 的布局组件需要基于一个布局容器，比如一个<div>，当然也可以使用整个<body>。将一个容器设置为 EasyUI 布局容器的方法很简单，只需要添加一个控件样式类 easyui-layout 就行了。
然后，在布局容器中至少要添加一个主工作区 center。在主工作区四周，可以分别添加一个边栏，以上北、下南、左西、右东的规则，分别标记为nouth（上）、south（下）、west（左）、east（右）。工作区的名字标记为容器标签的 region 属性。
例如，下面代码实现将一个300*300的<div>划分为5个区，左右侧区域宽度各100，其它自动：
<div class="easyui-layout" style="width:300px; height:300px;">
<div region="north">顶部</div>
<div region="west" style="width:100px">左侧</div>
<div region="center">主工作区</div>
<div region="east" style="width:100px">右侧</div>
<div region="south">底部</div>
</div>
显示效果如图：
（IE11）
如果将页面中 <body> 标签定义为布局容器，那么 EasyUI 可以将整个浏览器的工作区划分为5个区域。
需要注意的一点是，主工作区左侧和右侧的边栏必须要设置宽度，否则布局将不能正常显示。
Layout 常用属性
Layout 可以为工作区设置标题；也可以将工作区边栏设置为可变大小，以便用户使用鼠标拖动改变工作区大小。这两个功能分别是 title 属性（string）和 split 属性(bool)。
例如：下面代码将左侧边栏标题设置为“导航菜单”，并且大小可变：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="js/easyui-1.4.2/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="js/easyui-1.4.2/themes/icon.css" />
<script type="text/javascript" src="js/easyui-1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/easyui-1.4.2/jquery.easyui.min.js" ></script>
</head>
<body class="easyui-layout">
<div region="north">顶部</div>
<div region="west" style="width:100px" title="导航菜单" split="true">左侧</div>
<div region="center">主工作区</div>
<div region="east" style="width:100px">右侧</div>
<div region="south">底部</div>
</body>
</html>
在浏览器执行效果如图：
（IE11）
当然，如果需要设置上侧或下侧边栏的大小，设置相应的<div>标签的高度即可。