FineUI第十三天---`列布局
这是经典的列布局:
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第十三天---`列布局的更多相关文章
- bootstrap的栅格布局与两列布局结合使用
在工作中我们常常需要实现响应式布局,这个可以使用bootstrap的栅格系统来实现,我们在列里也需要实现一部分的响应式.比如下面的效果图,需要实现左边图标固定,右边的自适应 : 左边固定宽度,右边自适 ...
- css3-columns多列布局
/*css3中的布局*/ .wrapper{ margin:auto; width:300px; height:200px; border:2px dotted blue; -webkit-colum ...
- 多栏多列布局(display:flex)
display:flex 多栏多列布局浏览器支持情况:火狐直接支持w3c无前缀写法,谷歌和opera支持-webkit- 前缀写法,比较适合移动端开发使用, display:flex 这个牛逼的css ...
- css之页面两列布局
两列布局:左边固定,后边自适应 第一种方法:左边的div左浮动或者是绝对定位,右边的div加margin-left:左边div的宽度 html部分 <div class="left&q ...
- CSS三列布局
× 目录 两侧定宽中间自适应 两列定宽一侧自适应 中间定宽两侧自适应一侧定宽两列自适应三列自适应总结 前面的话 前面已经介绍过单列定宽单列自适应和两列自适应的两列布局.本文介绍三列布局,分为两侧定宽中 ...
- CSS多列布局
× 目录 [1]列宽 [2]列数 [3]列间距[4]列rule[5]跨列[6]列填充[7]多列 前面的话 CSS新增了多列布局特性,可以让浏览器确定何时结束一列和开始下一列,无需任何额外的标记.简单来 ...
- 第 28 章 CSS3 多列布局
学习要点: 1.早期多列问题 2.属性及版本 3.属性解释 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 提供的多列布局,通过多列布局我们方便的创建流体的多列布局. 一.早期多列问题 我们 ...
- FineUI第十四天---布局之垂直布局和水平布局
布局值水平布局和垂直布局 垂直盒子布局和水平盒子布局非常灵活易用,在很大程度上能够取代锚点布局,行布局和列布局. 1.垂直盒子布局: BoxConfigAlign:控制子容器的的尺寸 Start:位于 ...
- 多列布局——Columns
为了能在Web页面中方便实现类似报纸.杂志那种多列排版的布局,W3C特意给CSS3增加了一个多列布局模块(CSS Multi Column Layout Module).它主要应用在文本的多列布局方面 ...
随机推荐
- MySQL数据库的高可用性分析
MySQL数据库是目前开源应用最大的关系型数据库,有海量的应用将数据存储在MySQL数据库中.存储数据的安全性和可靠性是生产数据库的关注重点.本文分析了目前采用较多的保障MySQL可用性方案. MyS ...
- python增删改查(四)
###增删改查 names = ["zhangding","wangxu","wudong","cheng"] #增 n ...
- CF570D:Tree Requests
传送门 DFS重标号+二分 打比赛的时候想了很多方法..DFS序,BFS序,倍增什么的都考虑了一遍,但是几乎要么是可以维护两个区间但是代码复杂度爆炸,要么就是只能维护单一维度的信息. 这道题的具体做法 ...
- php 读取excel表格中的内容
<?php /** * excel表格内容在网页中显示 * * 首先需要下载PHPExcel 工具包 * 网址: http://phpexcel.codeplex.com/releases/vi ...
- Hibernate Hql 总结
1.from子句 Hibernate中最简单的查询语句的形式如下: from eg.Cat该子句简单的返回eg.Cat类的所有实例. 通常我们不需要使用类的全限定名, 因为 auto-import(自 ...
- 工作流、业务流程管理和SOA
http://www.cnblogs.com/shanyou/archive/2009/03/29/1424213.html 工作流定义: The automation of a business ...
- ios动态添加属性的几种方法
http://blog.csdn.net/shengyumojian/article/details/44919695 在ios运行过程中,有几种方式能够动态的添加属性. 1-通过runtime动态关 ...
- c++异常捕获
概念: “C++异常”就是 try{}catch(...){} “SEH异常”就是 __try{} __except(-//){} (关于这两种异常,如有不了解的地方,网上有很多资料可以参考) 目前微 ...
- Tips for writing a paper
Tips for writing a paper 1. Tips for Paper Writing 2.• Before you write a paper • When you are writi ...
- winSocket数据传输
服务器端: #include <WINSOCK2.H> #include <stdio.h> #pragma comment(lib,"ws2_32.lib" ...