55. CSS3 多列布局之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;
到目前为止大部分主流浏览器都对其支持:
实例演示:
将文本显示成三栏布局,每栏宽度为 150px。注意每个浏览器的兼容性!
HTML 代码:
<div class="columns"> <h2>我要分列显示</h2> <p>为了能在 Web 页面中方便实现类似报纸、杂志那种多列排版的布局,W3C 特意给 CSS3 增加了一个多列布局模块(CSS Multi Column Layout Module)。它主要应用在文本的多列布局方面。对于文本的多列布局,我想大家并不陌生,因为报纸和杂志上我们随处可见,这种布局在报纸和杂志上都使用了几十年了,但需要在 Web 页面上实现文本的多列布局,正如下图所示。</p> <p>为了能在 Web 页面中方便实现类似报纸、杂志那种多列排版的布局,W3C 特意给 CSS3 增加了一个多列布局模块(CSS Multi Column Layout Module)。它主要应用在文本的多列布局方面。对于文本的多列布局,我想大家并不陌生,因为报纸和杂志上我们随处可见,这种布局在报纸和杂志上都使用了几十年了,但需要在 Web 页面上实现文本的多列布局,正如下图所示。</p> </div>
CSS 代码:
.columns { width: 500px; padding: 5px; border: 1px solid green; margin: 20px auto; -webkit-columns: 150px 3; -moz-columns:150px 3; -o-columns:150px 3; -ms-columns: 150px 3; columns: 150px 3; }
效果如下:
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 55. CSS3 多列布局之Columns属性
码云笔记 » 55. CSS3 多列布局之Columns属性