这是经典的列布局：

 1  <x:PageManager runat="server"></x:PageManager>

 2         <x:Panel runat="server" Height="350px" Width="750px" Layout="Column" BodyPadding="5px">

 3             <Items>

 4                 <x:Panel runat="server" ColumnWidth="50%" CssClass="colum" ShowBorder="false" ShowHeader="false">

 5                     <Items> 

 6                      <x:Panel runat="server" Height="150px" CssClass="rowpanel"></x:Panel>

 7                 <x:Panel Height="100px" CssClass="rowpanel" runat="server"></x:Panel>

 8                     </Items>

 9                 </x:Panel>

                 <x:Panel runat="server" ColumnWidth="50%" ShowBorder="false" ShowHeader="false">

                     <Items>

                      <x:Panel runat="server" Height="100px" CssClass="rowpanel"></x:Panel>

                  <x:Panel Height="150px" runat="server" CssClass="rowpanel"></x:Panel></Items>

                 </x:Panel>

             </Items>

         </x:Panel>

17     </form>

注意：

1.父容器：Layout属性为Column；

2.子容器：设置width或者ColumnWidth属性来设置宽度

每一列之间有间隙：

每列可能有多个容器：

FineUI第十三天---`列布局的更多相关文章

  1. bootstrap的栅格布局与两列布局结合使用

    在工作中我们常常需要实现响应式布局,这个可以使用bootstrap的栅格系统来实现,我们在列里也需要实现一部分的响应式.比如下面的效果图,需要实现左边图标固定,右边的自适应 : 左边固定宽度,右边自适 ...

  2. css3-columns多列布局

    /*css3中的布局*/ .wrapper{ margin:auto; width:300px; height:200px; border:2px dotted blue; -webkit-colum ...

  3. 多栏多列布局（display:flex）

    display:flex 多栏多列布局浏览器支持情况:火狐直接支持w3c无前缀写法,谷歌和opera支持-webkit- 前缀写法,比较适合移动端开发使用, display:flex 这个牛逼的css ...

  4. css之页面两列布局

    两列布局:左边固定,后边自适应 第一种方法:左边的div左浮动或者是绝对定位,右边的div加margin-left:左边div的宽度 html部分 <div class="left&q ...

  5. CSS三列布局

    × 目录 两侧定宽中间自适应 两列定宽一侧自适应 中间定宽两侧自适应一侧定宽两列自适应三列自适应总结 前面的话 前面已经介绍过单列定宽单列自适应和两列自适应的两列布局.本文介绍三列布局,分为两侧定宽中 ...

  6. CSS多列布局

    × 目录 [1]列宽 [2]列数 [3]列间距[4]列rule[5]跨列[6]列填充[7]多列 前面的话 CSS新增了多列布局特性,可以让浏览器确定何时结束一列和开始下一列,无需任何额外的标记.简单来 ...

  7. 第 28 章 CSS3 多列布局

    学习要点: 1.早期多列问题 2.属性及版本 3.属性解释 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 提供的多列布局,通过多列布局我们方便的创建流体的多列布局. 一．早期多列问题 我们 ...

  8. FineUI第十四天---布局之垂直布局和水平布局

    布局值水平布局和垂直布局 垂直盒子布局和水平盒子布局非常灵活易用,在很大程度上能够取代锚点布局,行布局和列布局. 1.垂直盒子布局: BoxConfigAlign:控制子容器的的尺寸 Start:位于 ...

  9. 多列布局——Columns

    为了能在Web页面中方便实现类似报纸.杂志那种多列排版的布局,W3C特意给CSS3增加了一个多列布局模块(CSS Multi Column Layout Module).它主要应用在文本的多列布局方面 ...

随机推荐

  1. 【原】js获取height为auto的高度问题

    今天用react写一个页面,需要获取一个img高度设置为auto的高度,可是一直获取到的要么是0,要么是null,因为页面加载完了图片不一定加载完. 当我把高度由 auto 设置为固定值之后,又可以获 ...

  2. MyISAM与InnoDB两者之间怎么选择

    1.MyISAM不支持事务,InnoDB是事务类型的存储引擎 当我们的表需要用到事务支持的时候,那肯定是不能选择MyISAM了. 2.MyISAM只支持表级锁,BDB支持页级锁和表级锁默认为页级锁,而 ...

  3. js024-最佳实践

    js024-最佳实践 本章内容: 可维护的代码 保证代码性能 部署代码 24.1 可维护性 24.1.1 代码的可维护性 代码可维护性的特征: 特性 说明 可理解性 其他人可以理解它的用途和一般途径 ...

  4. Spring解析实践

    这几天重新把传智播客的黎活明的Spring2.5的教程学习了一遍,跟着上面的解析Spring的过程跟着制作了一个简单的Spring IOC和Spring AOP,先在贴上来给大家参考一下. 1:管理B ...

  5. Java数据结构——解析算术表达式

  6. header的安全配置指南

    0x00 背景 在统计了Alexa top 100万网站的header安全分析之后(2012年11月 - 2013年3月 - 2013年11月),我们发现其实如何正确的设置一个header并不是一件容 ...

  7. MONO加载DLL调试命令

    http://www.mono-project.com/docs/advanced/pinvoke/dllnotfoundexception/ http://www.mono-project.com/ ...

  8. MacPorts安装32位动态库

    http://superuser.com/questions/63198/install-32-bits-ports-on-snow-leopard

  9. ecshop 配送方式支持"货到付款"

    ecshop配送方式,支持货到付款方法. 打开表 ecs_shipping,找到字段support_cod,修改1则支持货到付款 扩展 问题描述:已经修改了ecs_shipping表里的support ...

  10. jQuery/js 正则收集（邮件验证、）

    var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/; //验证邮箱的正则表达式if( ...