57. CSS3 多列布局之column-count属性
column-count
属性主要用来给元素指定想要的列数和允许的最大列数。
语法规则:
column-count:auto | <integer>
取值说明:
属性值 | 属性值说明 |
auto | 此值为column-count 的默认值,表示元素只有一列,其主要依靠浏览器计算自动设置。 |
<integer> | 此值为正整数值,主要用来定义元素的列数,取值为大于 0 的整数,负值无效。 |
例如:将列分成四列显示,代码如下:
column-count:4;
实例演示:
让内容分成 2 列显示,注意浏览器的兼容性!
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> <p>为了能在 Web 页面中方便实现类似报纸、杂志那种多列排版的布局,W3C 特意给 CSS3 增加了一个多列布局模块(CSS Multi Column Layout Module)。它主要应用在文本的多列布局方面。对于文本的多列布局,我想大家并不陌生,因为报纸和杂志上我们随处可见,这种布局在报纸和杂志上都使用了几十年了,但需要在 Web 页面上实现文本的多列布局,正如下图所示。</p> </div>
CSS 代码:
.columns { padding: 5px; border: 1px solid green; width: 600px; margin: 20px auto; -webkit-column-count:2; -moz-column-count:2; -o-column-count:2; -ms-column-count:2; column-count:2; }
效果如下:
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 57. CSS3 多列布局之column-count属性
码云笔记 » 57. CSS3 多列布局之column-count属性