EasyMvc入门教程-高级控件说明（14）列布局控件

想起刚做网页时候，看着这么大的屏幕，一直在 想该如何布局呢，后来经过Table布局，Div布局，Border布局，列式布局。

目前EasyMvc主要支持12列的列式布局（手机兼容性好）。请看下面的例子：

@Html.Q().StartRow()
<div style="background-color: rgb(139, 235, 146)">我被包裹在StartRow与EndRow之间，我将占据12列。。。</div>
@Html.Q().EndRow()

@Html.Q().StartRow()
@Html.Q().StartCol()
<div style="background-color: rgb(181, 251, 219)">我被包裹在StartCol与EndCol之间，默认情况下，我将一下子占据6列。。。</div>
@Html.Q().EndCol()
@Html.Q().StartCol()
<div style="background-color:rgb(246, 247, 224)">我被包裹在StartCol与EndCol之间，默认情况下，我将一下子占据6列。。。</div>
@Html.Q().EndCol()
@Html.Q().EndRow()

　显示效果如下：

上面的代码看起来有些多，其实主要是两个关键词，Row和Col。：）

Col可以指定其包含的内容占据多少列，如下列所示：　

@Html.Q().StartRow()

@Html.Q().StartCol(new ColModel(){ColSpan = 1})
<div style="background-color: rgb(212, 255, 235); height: 200px;">我被设置了ColSpan = 1，我现在占据1列。。。</div>
@Html.Q().EndCol()

@Html.Q().StartCol(new ColModel() { ColSpan = 11 })
<div style="background-color: rgb(139, 235, 146);height: 200px;">我被设置了ColSpan = 11，我现在占据11列。。。</div>
@Html.Q().EndCol()

@Html.Q().EndRow()

注意其中的ColSpan=1，含义为占据12列中的1列，即其占据父容器的1/12宽度。怎么样，还容易理解吧。　　

另外，列布局还支持列偏移与列间距，分别通过ColOffset和ColSpace实现。这两种情况请见在线演示，不再复述。

---

 

总结：列布局控件比较简单，只要理解12列布局即可。 ：）

 

更多使用示例请浏览在线示例：http://core.zwc.cn