CSS3 Columns分列式布局方法简介

幸运的是，CSS3里提供了一批新的创建列式布局的column属性，有了这些属性，我们不需要再使用float,clear,margin等属性进行调控，避免了很多麻烦。

CSS代码

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

1.column-count: 列数目
2.column-gap: 各列之间间隙宽度
3.column-width: 建议宽度；未必会使用，浏览器基于此数值进行计算
4.column-rule-width：列之间分割线宽度
5.column-rule-style：列之间分割线风格
6.column-rule-color：列之间分割线演示
7.column-span: 允许一个元素的宽度跨越多列
8.column-fill: 分列方式

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

发表评论 共有条评论 用户名: 密码: 验证码: 匿名发表