mojoportal学习——文章翻译之布局的一些原理

翻译的不好 大家见谅

当建立一个页面的时候，内容管理系统会使你选择一列来进行页面布局。在mojoportal中，支持1-3列的自动布局。

你需要明白的是有3个placeholder在layout.master中。divLeft ,divCenter,divRight 将会用来显示内容管理系统中的内容。。

系统会根据你的内容来自动调整1-3列的页面布局。

你可以添加可选的页面区域，使用 Content Templates.

CSS类的工作逻辑：

如果页面有菜单或者其他内容在divLeft，没有内容在divRight,divCenter的CSS类名将会是：center-leftmargin

如果页面有菜单或者其他内容在divRight,没有内容在divLeft,divCenter的CSS类名将会是：center-rightmargin

如果divleft和divright中都有内容，divCenter的CSS类名将会是：center-rightandleftmargins.

如果divleft和divright都没有内容，divCenter的CSS类名将会是：center-nomargins

如果divLeft或者 divRight没有内容和菜单，显示属性将会被设置为false.从标签中完全删除。

mojoportal模板中的页面列布局有2中方式，边列布局以绝对位置，或者浮动所有布局列。

》》》左右列以绝对位置布局

例子：

.leftside { position: absolute; left:6px; top:172px; width:160px; }
html>body .center-nomargins { margin: 3px 5px 0px 5px; }
html>body .center-rightandleftmargins { margin: 0px 172px 0px 172px; }
html>body .center-rightmargin { margin: 0px 172px 0px 5px; }
html>body .center-leftmargin { margin: 0px 5px 0px 172px; }
.rightside { position: absolute; right: 6px; top:172px; width:160px; }

》》》 所有列靠左浮动

例子：

.leftside { float:left; width:186px; margin: 10px 10px 0px 5px; }
.center-nomargins {float:left; width: 818px; margin: 10px 12px 0px 18px;}
.center-rightandleftmargins {float:left; width:455px; margin: 10px 0px 0px 0px;}
.center-rightmargin {float:left; width: 642px; margin: 10px 0px 0px 10px;}
.center-leftmargin { float:left; width: 642px; margin: 10px 0px 0px 0px; }
.rightside { float:left; width:186px; margin: 10px 0px 0px 10px; }