CSS3Multi-columns之列数和列宽_html/css_WEB-ITnose

“ Multi-column ”译成中文就是“多列”，这个" Multi-column "是 W3C 给 CSS3 增加的一个 多列布局模块（CSS Multi-column Layout Module） 。它主要应用在文本的多列布局方面，对于文本的多列布局我想大家并不陌生，因为报纸和杂志上我们随处可见，这种布局在报纸和杂志上都使用了几十年了，但需要在Web页面上实现文本的多列布局，正如下图所示：

对于上图的两列布局，我想Web攻城师们实现起来还是有相当大的难度。但是CSS3的“Multi-column”就可以帮大家解决上面这样的多列布局，所以Web攻城师们掌握了这个新的设计方法也就掌握了一样新的技术，那么今天开始主要和大家一起探讨一下CSS3的“Multi-column”使用方法和注意事项。

CSS3 的" Multi-column "按大块主要分成以下几块：

1、 列数和列宽 ： column-count ; column-width ; columns

2、 列的间距和分列样式 ： column-gap ; column-rule-color ; column-rule-style ; column-rule-width ; column-rule ;

3、 列的分栏符 ： break-before ; break-after ; break-inside ;

4、 跨越列 ： column-span ;

5、 填充列 ： column-fill 。

从今天开始花几节专门针对上面所列每个部分的东西进行介绍，首先开始第一部分 列数和列宽 ：

一、column-count

column-count作用：主要是用来描述一个Multi元素的列数

column-count语法：

column-count: auto || 数字 

取值说明：

1、auto：此值为column-count的默认值，当column-count没有设置任何值时，默认的值就是auto,此时的栏数是根据别的参数来确定的，比如说列宽；

2、数字：这里可以是任何正整数数字，但不可以带有任何单位，用来表示Multi元素分列的列数。

兼容的浏览器：

从上图中可以看出，IE全家都不支持这个属性，但是在Firefox和Webkit下还是需要自己的私有属性：-moz和-webkit，这样正确的兼容写法如下：

/*Firefox*/  -moz-column-count:auto || 数字;  /*Webkit*/  -webkit-column-count:auto || 数字;  /*W3C标准*/  column-count:auto || 数字; /*Opera11.0+*/ 

接下来先创建一个简单的段落Demo

HTML Code

Lorem ipsum dolor sit ... deserunt mollit anim id est laborum.

      
查看更多关于CSS3Multi-columns之列数和列宽_html/css_WEB-ITnose的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did111994