网站地图    收藏   

主页 > 专题教程 > css >

column-fill

来源:自学PHP网    时间:2018-02-08 10:48 作者: 阅读:

[导读] CSS column-fill属性用于指在多列布局中,每一个列的内容如何填充和分配。...

CSS column-fill属性用于指在多列布局中,每一个列的内容如何填充和分配。

使用CSS column-fill属性,你可以控制列的内容是均匀分配还是自动分配。

内容均匀分配也叫平衡模式,该模式中,浏览器(或use agent)会调整各个列的高度,使各个列的内容的高度基本一致。而自动分配模式会使内容按顺序分配在各个列中,各个列的高度可能不一样。

当多列布局中,当列的高度被明确指定的时候,column-fill属性的效果就会非常明显。

下面的图片展示了平衡模式和自动分配模式的效果:

CSS column-fill属性两种模式效果演示

官方语法
column-fill: auto | balance                
                            

参数:

  • balance:平衡模式,各个列的内容高度基本一致。
  • auto:列的内容按顺序分布,各个列中内容的高度不一定相同。

column-fill属性的初始值为auto

应用范围

column-fill属性可以应用在所有多列布局元素上。

示例代码

下面是column-fill属性的一些取值的示例代码:

/* 关键字 */
column-fill: auto;
column-fill: balance;

column-fill: inherit;                              
                            

下面是一个实际应用的示例代码:

.columns{
  width: 100%;
  height: 350px;
  -moz-columns: 2em 3;
  -webkit-columns: 2em 3;
  columns: 2em 3;

  -webkit-column-fill: balance;
  -moz-column-fill: balance;
  column-fill: balance;
  
  text-align: justify;
}                              
                            
在线演示

注意,column-fill属性目前只有Firefox浏览器才支持,所以下面的演示需要在Firefox浏览器中才可以看到效果:

column-fill: balance

CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充。这种新语法能够让WEB开发人员轻松的让文本呈现多列显示。我们知道,当一行文字太长时,读者读起来就比较费劲,有可能读错行或读串行。

人们的视点从文本的一端移到另一端、然后换到下一行的行首,如果眼球移动浮动过大,他们的注意力就会减退,容易读不下去。所以,为了最大效率的使用大屏幕显示器,页面设计中需要限制文本的宽度,让文本按多列呈现,就像报纸上的新闻排版一样。

但是在CSS3的多列布局(columns)语法功能出现之前,人们如果想让文本呈多列显示,要么使用绝对定位,手动给文本分段落,或者使用JS脚本等,而新语法的出现,彻底改变了这样的局面。

浏览器支持

目前只有Firefox浏览器支持column-fill属性。

最新评论

添加评论

更多文章推荐

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论