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;
}

效果如下:

CSS3 多列布局之column-count属性

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有资源及文章均来源于网络及用户分享或为本站原创,仅限用于学习和研究,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 57. CSS3 多列布局之column-count属性

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们