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>
10                 <x:Panel runat="server" ColumnWidth="50%" ShowBorder="false" ShowHeader="false">
11                     <Items>
12                      <x:Panel runat="server" Height="100px" CssClass="rowpanel"></x:Panel>
13                  <x:Panel Height="150px" runat="server" CssClass="rowpanel"></x:Panel></Items>
14                 </x:Panel>
15             </Items>
16         </x:Panel>

17     </form>

注意：

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

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

每一列之间有间隙：

每列可能有多个容器：

时间： 2024-10-18 18:04:08

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

css-3列布局

三列布局的步骤是,先定义左右两侧,然后定义中间,并设置'中间'部分的'margin'属性.例如: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"

css3-web字体 and CSS3多列布局与伸缩布局

WEB字体 语法 @font-face{ font-family:""; src:url() format() .... } 兼容性写法 @font-face { font-family: 'diyfont'; src: url('diyfont.eot'); /* IE9+ */ src: url('diyfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('diyfont.woff') format('w

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

在工作中我们常常需要实现响应式布局,这个可以使用bootstrap的栅格系统来实现,我们在列里也需要实现一部分的响应式.比如下面的效果图,需要实现左边图标固定,右边的自适应 : 左边固定宽度,右边自适应,这个时候我就想到了两列布局,将左右设置float,左边设置固定宽度,右边的宽度为calc(100% - 左边的宽度),把这两种布局结合使用就可以实现效果.

CSS多列布局Multi-column、伸缩布局Flexbox、网格布局Grid详解

新css属性为我们提供了更加便捷的网页布局方式.来自微软的thomas lewis将带你认识去Grid Alignment,Flexibox Box以及Multi-column Layout这三大领域. 这篇文章最早出现在the April 2012 issue (226)这期的.net杂志上-这杂志是面向网页设计者以及开发者,全球销量最高的杂志. 按照以往来说,用CSS来布局看起来总是一样非常繁杂的工作.然而,随着一个个新标准的推出,网页设计者已经能够实现非常轻松地进行布局工作了. 主流的浏览

如何通过 CSS 实现一个左边固定宽度、右边自适应的两列布局

最近在百度 IFE 训练营中看见的一道题目: 用两种不同的方法来实现一个两列布局,其中左侧部分宽度固定.右侧部分宽度随浏览器宽度的变化而自适应变化  个人总结出如下三种实现思路: 通过绝对定位实现 See the Pen absolute-two-column by xal821792703 (@honoka) on CodePen. 注意点如下: 需要套一个“positioned”的父元素 div-a 绝对定位,并将位置调整为浏览器左上角 div-b margin-left 属性值为 div-

两列布局的设置方法总结

今天看到了这样一道题 用两种不同的方法来实现一个两列布局,其中左侧部分宽度固定.右侧部分宽度随浏览器宽度的变化而自适应变化 自己感觉有好几种方法,再此总结下: 一.使用position:absolute方法,因为把元素设置为absolute,那元素就脱离了文档流,后面的元素就会占据他原来的位置: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xht

盒子模型、网页自动居中、float浮动与清除、横向两列布局

1.CSS包含:标准文档流,浮动,绝对定位 标准文档流的特点:从上到下,从左到右,输出文档内容 盒子模型:块级元素(div ui li dl dt p)与行级元素(span strong img input) 盒子模型:边框(border)外边框(margin)内边框(padding)内容(content) 盒子3D模型:border. content+padding .background-img.background-color.margin <html> <head> <

CSS多列布局

1.多列等高布局 这种布局即每一列的高度保持一致,高度与最高的一列相同.等高布局是为了维护边框线条的完整性,在有些地方则可能是为了维护背景的完整性,达到整体一致不缺失的效果. 最常用的方法为padding补偿法: .container{ overflow:hidden; } .item{ float:left; width:100px; margin-right:10px; padding-bottom:10000px; margin-bottom:-10000px; } <div class=

多列布局----伸缩布局-----

多列布局: 设置列数:column-count:4 || 2....... 添加列间隙样式,与边框样式border添加一样   column-rule:dashed 3px red 设置列间隙大小   column-gap :50px 设置列宽:原则:取大有限  如果人为设置自宽度更大,则取更大的值,但是会填充整个屏幕,以为最终的宽度可能也会大于设置的宽度  :::  如果人为设置的宽度更小,使用默认计算的宽度   column-width:200px 设置跨列显示  column-span:a