多列布局——Columns

为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局,W3C特意给CSS3增加了一个多列布局模块(CSS Multi Column Layout Module)。它主要应用在文本的多列布局方面,这种布局在报纸和杂志上都使用了几十年了,但要在Web页面上实现这样的效果还是有相当大的难度,庆幸的是,CSS3的多列布局可以轻松实现。接下来咱们一起学习多列布局相关的知识。

语法:

columns:<column-width> || <column-count>

多列布局columns属性参数主要就两个属性参数:列宽和列数。


参数


参数说明


<column-width>


主要用来定义多列中每列的宽度


<column-count>


主要用来定义多列中的列数

举例:要显示2栏显示,每栏宽度为200px,代码为:

columns: 200px 2;

到目前为止大部分主流浏览器都对其支持:

时间: 2024-08-07 19:22:01

多列布局——Columns的相关文章

CSS3 多列布局——Columns

CSS3 多列布局--Columns 语法: columns:<column-width> || <column-count> 多列布局columns属性参数主要就两个属性参数:列宽和列数. 参数 参数说明 <column-width> 主要用来定义多列中每列的宽度 <column-count> 主要用来定义多列中的列数 实例代码: <!DOCTYPE html> <html> <head> <meta charse

css3中的多列布局columns详解

columns语法:columns:[ column-width ] || [ column-count ]设置或检索对象的列数和每列的宽度 其中:[ column-width ]:设置或检索对象每列的宽度:[ column-count ]:设置或检索对象的列数. css代码: body{font:14px/1.5 georgia,serif,sans-serif;} p{margin:0;padding:5px 10px;background:#eee;} h1{margin:10px 0;f

css3多列布局

http://www.webhek.com/css3-multi-columns http://express.ruanko.com/ruanko-express_46/technologyexchange5.html CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充.这种新语法能够让WEB开发人员轻 松的让文本呈现多列显示.我们知道,当一行文字太长时,读者读起来就比较费劲,有可能读错行或读串行:人们的视点从文本的一端移到另一端.然后换到下一行 的

《CSS3实战》笔记--多列布局

通过阅读和学习书籍<CSS3实战>总结 <CSS3实战>/成林著.-北京机械工业出版社2011.5 ??多列布局适合纯文字版式设计,如报纸内和杂志类网页布局,不适合做网页结构布局.灵活使用多列布局特性,可以实现在多列中显示文字和图片,从而节省大量的网页空间.如果网页上的文字很长,多列布局特性就能够发挥它的用武之地. 兼容性参考:http://www.w3.org/TR/css3-multicol/ columns属性–定义多列布局 ??columns是多列布局特性的基本属性,类似边

css3 多列布局

一.多列布局——Columns  语法:columns:<column-width> || <column-count> 1. column-width: 主要用来定义多列中每列的宽度 column-width: auto | <length> length: 使用固定值来设置元素列的宽度,其主要是由数值和长度单位组成,不过其值只能是正值,不能为负值. 2. column-count:主要用来定义多列中的列数 column-count:auto | <intege

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

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

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

八种创建等高列布局

高度相等列在Web页面设计中永远是一个网页设计师的需求.如果所有列都有相同的背景色,高度相等还是不相等都无关紧要,因为你只要在这些列的父元素中设置一个背景色就可以了.但是,如果一个或多个列需要单独设置自己的背景色,那么它的视觉完整性的设计就显得非常重要了.大家都知道当初Table实现等高列布局是多么的简单,但是我们使用CSS来创建等高列布局并非是那么容易的事情. 如果一个设计是固定宽度(非流体的宽度设计),那么实现多列等高效果是相当的容易.最好的技术就是使用Dan Cederholm的Faux

八种创建等高列布局(转载)

高度相等列在Web页面设计中永远是一个网页设计师的需求.如果所有列都有相同的背景色,高度相等还是不相等都无关紧要,因为你只要在这些列的父元素中设置一个背景色就可以了.但是,如果一个或多个列需要单独设置自己的背景色,那么它的视觉完整性的设计就显得非常重要了.大家都知道当初Table实现等高列布局是多么的简单,但是我们使用CSS来创建等高列布局并非是那么容易的事情. 如果一个设计是固定宽度(非流体的宽度设计),那么实现多列等高效果是相当的容易.最好的技术就是使用Dan Cederholm的Faux