HTML5column属性布局页脚,利用column多列属性调整页面文字列布局
column多列属性
column-count:栏目数
兼容性写法:
CSS Code复制内容到剪贴板
-webkit-column-count:3
-moz-column-count:3
column-width 属性规定列的宽度。
column-gap属性规定列之间的间隔
column-rule 属性设置列之间的宽度、样式和颜色规则。
CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充。这种新语法能够让WEB开发人员轻松的让文本呈现多列显示。我们知道,当一行文字太长时,读者读起来就比较费劲,有可能读错行或读串行;人们的视点从文本的一端移到另一端、然后换到下一行的行首,如果眼球移动浮动过大,他们的注意力就会减退,容易读不下去。所以,为了最大效率的使用大屏幕显示器,页面设计中需要限制文本的宽度,让文本按多列呈现,就像报纸上的新闻排版一样。
但是在CSS3的多列布局(columns)语法功能出现之前,人们如果想让文本呈多列显示,要么使用绝对定位,手动给文本分段落,或者使用JS脚本等,而新语法的出现,彻底改变了这样的局面。
多列(columns)的用法
列个数 和 列宽度
不管想让一段文本呈多少列显示,你需要的只是两个属性:column-count 和 column-width。
column-count 属性设置列的具体个数,例如:
这将会使文本里的内容显示成两列(首先你的浏览器要支持这种新语法,比如火狐浏览器、谷歌浏览器,IE10+等):
column-width属性控制列的宽度。如果你没有提供column-count属性值,那么,浏览器就是自主决定将文本分成合适的列数。
就变成了这样:
在一个多列的文本块里,文本内容会自动的一列一列的填充。
多列布局columns语法简写
大多时候,WEB程序员只需要同时使用这两个属中的一个:column-count 或 column-width。或者两个同时使用,幸运的是,这两个属性的属性值是不同单位,不会搞混,所以就有了简写方式,columns,例如:
我们之前写的 column-width:12em 可以用下面的写法替换:
。
而之前写的 column-count:4 可以用以下语法简写替换:
而同时声明了 column-width:8em 和 column-count:12 的情况可以用以下简写替换:
列高度的平衡
CSS3规范里描述的是,各列的高度是均衡的,浏览器会自动调整每列里填充多少文本、均分文本,来使各列的高度保持均衡一致。
然而,有时候,我们需要设定列的最大高度,这个时候,文本内容会从第一列开始填充,然后第二列,第三列,也许以后的列会填不满,也许会溢出。所以,当对多列布局设定了height或max-height属性值后,列会伸长到指定高度——无论内容有多少,够不够或超不超。
列之间的缝隙间隔宽度
两列之间会有缝隙间隔。缺省情况下这个间隔宽度是1em,但如果你使用column-gap属性,就会修改这个缺省的宽度值:
列布局的浏览器完美兼容
对于一些不支持多列布局特征的浏览器,比如IE9/IE8,会把这些属性全部忽略,这样布局就呈现出传统的单块布局。
为了保证浏览器最大的兼容性,我们在使用多列布局属性时,最好添加浏览器引擎前缀,最基本的要加上三种:谷歌浏览器的-webkit-,火狐浏览器的-moz-,IE浏览器的-ms-,最后,别忘了不带前缀的写法。
总结
CSS3的多列布局(columns)是一种方便WEB开发者高效利用宽屏显示器的非常有用的功能特征。你会发现在很多地方都需要用到它们,特别是需要自动平衡列高度的地方。
HTML5column属性布局页脚,利用column多列属性调整页面文字列布局相关推荐
- 业务展示类网站高保真原型模板库、企业品牌官网、公司业务介绍、产品展示及营销、首页模板、内页模板、单页模板、整站模板、导航、轮播、横幅、列表、客户、案例、页脚、动态面板、母版、页面事件、窗口函数
本作品是一套专为业务展示类网站而推出的原型模板库,适用于制作企业品牌官网.公司业务介绍.产品展示及营销等各类网站.作品中包含了符合目前主流展示类网站设计风格的丰富模板及素材,并以UI设计稿级别的高保真 ...
- 静态页中利用AJAX.NET实现无刷新页面
一. 导言 我们知道,ASP.net应用程序事实是在服务器上运行的,用户的请求要不断地送往远程的服务器,服务器执行完本地的程序后把重新装载页面再发送客户端.所以就出现了不断刷新的问题,页面不断闪烁.用 ...
- 一个html文件创造多个页面,使页眉和页脚文件包含在多个html页面中。
侃侃尔雅 你可以用jQuery.将此代码放入index.html click here for google现在,当你访问index.html,您应该能够单击链接标记.
- html固定页脚布局及样式,html页脚固定在底部的方法
html { height: 100%; } body { height: 100%; margin: 0; padding: 0; } .container, .jumbotron { min-he ...
- 论文页眉奇偶页不同怎么设置_还在愁毕业论文的页眉页脚吗?
在文档中添加页眉和页脚能够很好的对相关信息进行展示或说明,在写论文的时候,设置页眉和页脚,能够让老师清楚的了解你的论文,但同时页眉和页脚的设置也是最让人头疼的,今天零壹学长就给大家详细的介绍页眉和页脚 ...
- CSS + DIV 让页脚始终保持在页面底部
来源:David's Blog http://www.DavidQiu.com/ 文章链接:http://blog.davidqiu.com/post/2013-06-17/400517539 ...
- html中页码居中,如何把Word2007的页脚设置为页码并居中?
回答: Word 2007插入页脚 刘洋:我想在Word 2007的页脚中插入内容,比如第几页共几页.但Word 2007的变化太大了,跟Word 2003及以前的版本都不一样,我找了半天,都不知道在 ...
- 如何将页脚固定在页面底部,而不是屏幕底部!
一个经典的 Sticky footers 布局问题 话不多说贴代码 <div class="main"><div class="main-box&quo ...
- MOSS系列之五母版页和布局页Featur…
如果一个网站有很多页面,而这些页面需要一致的外观和样式时,可能对于程序设计人员来说,需要重复的一些工作,开发维护都比较麻烦. MOSS2007中引人注目的一项功能就是web内容管理(Web Conte ...
最新文章
- SQLServer 2012 报表服务部署配置(1)
- php文章远程图片,php保存远程图片到本地 php正则匹配文章中的远程图片地址
- MySQL Fabric 套件,提供自动故障检测和故障转移
- 插入排序算法C++代码实现
- 【Rollo的Python之路】Python 多进程 学习笔记 multiprocessing
- Eureka(易瑞卡)注册中心【Zookeeper】分布式设计定理CAP
- 中间表为什么可以不用实体类_法国蜗牛供不应求,为什么不用中国蜗牛代替?看完才知道真不可以...
- matlab可以拼图么,拼图matlab程序希望有人可以给我讲解一下!!有偿求标注
- xware for linux,Ubuntu 14.04安装迅雷Xware过程笔记
- RTL8762DK UART(二)
- 利用记事本编写html代码和word实现A4信笺纸(信签纸)电子版的两种设计法
- opencv绘制图形轮廓并筛选面积操作
- 关于嵌入式的发展方向
- 实现导航栏的几种方式
- Linux安全合规性检查和加固
- uniapp 调用原生插件包含第三方SDK时抛NoClassDefFoundError异常
- 计算机组成原理 模拟机,面向计算机组成原理数学的MML模拟器
- 获取公众号的关注链接
- html5 树开花效果,几种不用经常照顾的灌木花卉,开成花树后太美了
- JS与jQuery获取任意事件的子元素下标(获取当前类数组的某一子元素下标)