CSS3 多列布局的 column-width 和 column-count 属性

在CSS3之前,要让Web页面像报纸、杂志的排版一样,呈现多列布局,你必须将内容拆分到不同的标签中,然后分别设定样式,或者使用浮动和绝对定位,或者使用JS脚本等,并且实现起来也很困难。

CSS3新增了多列布局特性,彻底改变了这样的局面,这种新语法能够让页面内容轻松地分布到多列网格中,实现类似报纸、杂志一样的排版效果,而无需任何额外的标签。

多列布局相关的核心属性包括列宽和列数、列间隙和边框、分列符、跨列、填充列等,下面分别进行介绍。

列宽和列数

在多列布局中,可以通过 columns属性设定列的具体宽度或列的数目,使内容分布到多列网格中,用来实现多列布局的效果。语法格式为:

 
  1. columns:[column-width ] || [ column-count ]

也就是说,columns属性可以分解为 column-width 和 column-count 这 2 个独立的属性,下面分别进行介绍。

column-width

如果想使用固定宽度的列,就可以使用 column-width属性来设置每列的列宽,取值为 <length> | auto,默认为 auto。auto 表示元素多列的列宽将由其它属性(如,column-count属性)决定;<length>表示使用长度值来设置元素的最佳列宽,不允许负值。

假设有一个 div 容器,容器中包含一些内容。HTML代码如下:

 
  1. <div>
  2. <p>在CSS3之前,要…实现起来也很困难。</p>
  3. <p>CSS3多列布局的出现,彻底改变…分布到多列网格中。</p>
  4. </div>

接下来的多列布局实例,都将使用上述结构。为了方便查看效果,为容器设置固定宽度,并添加了 1px 的浅黑色边框:

 
  1. div {
  2.     width: 450px;
  3.     border: 1px solid #444;
  4. }

如果将 column-width属性设置为固定的长度值,则在内容的宽度超过该值时,浏览器就会自动以多列进行布局。目前为止,还没有任何浏览器支持多列布局相关的属性,需要使用浏览器私有属性(下同)。如:

 
  1. div {
  2.    
  3.    -webkit-column-width: 10em;
  4. }

按照上述设定,容器中的内容将会分布在宽度为 10em 的列中。并且,在窗口尺寸发生变化的过程中,浏览器会自动根据列框,来调整列的数目。运行结果如图 9‑1 所示:

column-width属性效果图9-1 column-width属性效果

然而,根据W3C标准,column-width属性值实际上是给浏览器建议的最佳宽度,实际的列宽可以根据容器空间的大小进行调整。调整规则如下:

1)当容器可用空间足够大时,实际的列宽可能大于所设置的列宽。如:

 
  1. div {
  2.    
  3.    -webkit-column-width: 300px;
  4. }

上述代码中,容器的宽度是 450px,而设置的列宽是 300px。此时,内容将自动填满整个容器的宽度,实际的列宽将是 450px,而不是 300px。运行结果如图 9‑2 所示:

容器宽度大于列宽图9-2 容器宽度大于列宽

从上图可以看出,虽然容器可用空间足够大,但还是无法按两列进行布局,所以就会把列宽扩展到容器的宽度,整个容器就只有一列,而不是多列。

2)当容器的宽度小于设置的列宽时,将以容器的宽度作为列宽。如:

 
  1. div {
  2.    width: 200px;
  3.    -webkit-column-width: 300px;
  4. }

上述代码中,容器的宽度是200px,而设置的列宽是300px。此时,实际的列宽将是容器的宽度 200px。运行结果如图 9‑3 所示:

容器宽度小于列宽图9-3 容器宽度小于列宽

从上图可以看出,虽然设置的列宽大于元素容器的宽度,但并不会让元素内容按列的宽度进行布局,它只能把列宽压缩到容器的宽度。

column-count

如果希望列的数目保持不变,而让浏览器根据窗口的尺寸自动调整列宽,就可以使用 column-count属性来设置列数,取值为 <integer> | auto,默认为 auto。auto 表示列数由浏览器自动计算;integer 表示建议的最佳列数,取值为大于 0 的整数。如果同时指定了列数和列宽,则 column-count 表示最大列数。如:

 
  1. div {
  2.  
  3.   -webkit-column-count: 3;
  4. }

在多列容器中,浏览器会自动按照指定的列数,一列一列进行填充。上述代码表示,按 3列将内容填充到容器中,运行结果如图 9‑4 所示:

column-count属性效果图9-4 column-count属性效果

从上图可以看出,给多列容器指定列数后,在窗口尺寸发生变化时,浏览器会根据列数和容器宽度,自动计算出每列的宽度,以保证按照 3 列进行布局。

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值