CSS3多列布局模块属性：
Posted 我是懒洋洋
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS3多列布局模块属性：相关的知识，希望对你有一定的参考价值。
column-count：<integer> | auto
功能：设置或检索对象的列数
适用于：除table外的非替换块级元素, table cells, inline-block元素
<integer>： 用整数值来定义列数。不允许负值
auto： 根据 <' column-width '> 自定分配宽
column-gap：<length> | normal
功能：设置或检索对象的列与列之间的间隙
适用于：定义了多列的元素
计算值：绝对长度值或者normal
column-rule：<' column-rule-width '> || <' column-rule-style '> || <' column-rule-color '>
功能：设置或检索对象的列与列之间的边框。与border属性类似。
适用于：定义了多列的元素
columns：<' column-width '> || <' column-count '>
功能：设置或检索对象的列数和每列的宽度
适用于：除table外的非替换块级元素, table cells, inline-block元素
<' column-width '>： 设置或检索对象每列的宽度
<' column-count '>： 设置或检索对象的列数
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>多列布局</title> <style type="text/css"> #div1{ column-count: 3; /*分3栏*/ column-gap: 40px; /*栏间距*/
column-rule: 2px solid lightgreen; /*栏间分隔线，与border设置类似*/ line-height: 26px; /*设置行高26px*/ font-size: 14px; /*设置字体大小为14px*/ height: 500px; /*设置行高为500px*/
color: skyblue; /*设置字体颜色为天蓝色*/ } </style> </head> <body> <div id="div1"> CSS即层叠样式表（Cascading StyleSheet）。 在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。CSS即层叠样式表（Cascading StyleSheet）。 在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，
或者页数不同的网页的外观和格式。CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。 </div> </body>
</html>
运行效果：
以上是关于CSS3多列布局模块属性：的主要内容，如果未能解决你的问题，请参考以下文章