欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

CSS3 Columns:比table更好用的分列式布局方法_html/css_WEB-ITnose

程序员文章站 2022-06-03 22:02:02
...
CSS里一直有一个让我们头疼的问题,就是创建布局很麻烦。当然,有很多方式,有很多技术都可以创建各种布局,但我们总觉得CSS里应该提供一些新属性,让我们能更好的管理布局。幸运的是,CSS3里提供了一批新的创建列式布局的column属性,有了这些属性,我们不需要再使用 float, clear, margin等属性进行调控,避免了很多麻烦。

观看演示

CSS代码

CSS3里的column系列属性提供了各种不同的功能,通过组合使用它们,你能得到相应的任何分栏式布局:

  • column-count : 列数目
  • column-gap : 各列之间间隙宽度
  • column-width : 建议宽度;未必会使用,浏览器基于此数值进行计算
  • column-rule-width :列之间分割线宽度
  • column-rule-style :列之间分割线风格
  • column-rule-color :列之间分割线颜色
  • column-span : 允许一个元素的宽度跨越多列
  • column-fill : 分列方式

要想制作出一个漂亮的分列布局,你至少需要用到 column-count和 column-gap:

/* 3 列,每列之间10px间距 */ul.col-3 {	column-count: 3;	column-gap: 10px;}

如果你想美化一下列之间的空隙,这也很简单:

/*  3 列,每列之间10px间距 ,带有金色的隔离线 */ul.col-3 {	column-count: 3;	column-gap: 10px;	column-rule: 1px solid #fc0;}

指定的元素还可以横跨多列:

/* 以下面的HTML为例:

表头!

列 1
列 2
列 3
列 4
列 5
列 6
列 7
列 8
列 9
列 10
列 11
列 12
*/div.col-3 { column-count: 3; column-gap: 5px;}div.col-3 h2 { column-span: all; text-align:center; background: #eee;}

非常的简单,而且显示结果完全符合我们的预期!

观看演示

使用CSS3的columns制作页面布局有很多优势:你不需要计算宽度,你不需要担心内容是否会撑破布局,这些数学问题系统都会帮你计算。还有一个,那就是清晰整洁的语义。