Open liujiusheng opened 7 years ago
浏览器已经更新了这么多版本了，多列布局这么好的特性我想也可以开始用了。
目前columns支持情况： ie10+可直接用,firefox加-moz-前缀可用，chrome,safari,opera等和安卓ios平台均可加-webkit-前缀可用
使用： columns支持复合属性设置，它是针对设置了这个属性的所有子元素进行分列。 一般情况下子元素为很多个p标签，整体是一篇文章的样式。 若为子元素设置了样式，则子元素的样式也会生效，但对于整个内容来说它还是一个分列布局。 比如我们设置了第一大段的width为2000px远远超过自动分列出来的每一列宽度，那么第一大段会以2000px的宽度去渲染它的内容以保证显示正确，但它并不会因此而将columns撑开从而所致某一列宽度比其它的大。 相当于它是画了一个死框，将一行分成多列，每一列的宽度根据设置已经固定死，不会因为内容而改变。 内容过宽会绘制到外面去，但不影响整体布局，列也不会将绘制出去的部分隐藏。
columns:每一列的宽度 || 列数 若设置列数则会自动分配宽度，若设置宽度则会自动分配列数将容器填满。 column-gap：设置或检索对象的列与列之间的间隙 column-rule：宽度 样式 颜色。设置或检索对象的列与列之间的边框 column-span：设置或检索对象元素是否横跨所有列(firefox 不支持) column-fill：设置或检索对象所有列的高度是否统一（听说目前只有 firefox 支持没测试出过效果） column-break-before：设置或检索对象之前是否断行 column-break-after：设置或检索对象之后是否断行 column-break-inside：设置或检索对象内部是否断行
浏览器已经更新了这么多版本了，多列布局这么好的特性我想也可以开始用了。
目前columns支持情况： ie10+可直接用,firefox加-moz-前缀可用，chrome,safari,opera等和安卓ios平台均可加-webkit-前缀可用
使用： columns支持复合属性设置，它是针对设置了这个属性的所有子元素进行分列。 一般情况下子元素为很多个p标签，整体是一篇文章的样式。 若为子元素设置了样式，则子元素的样式也会生效，但对于整个内容来说它还是一个分列布局。 比如我们设置了第一大段的width为2000px远远超过自动分列出来的每一列宽度，那么第一大段会以2000px的宽度去渲染它的内容以保证显示正确，但它并不会因此而将columns撑开从而所致某一列宽度比其它的大。 相当于它是画了一个死框，将一行分成多列，每一列的宽度根据设置已经固定死，不会因为内容而改变。 内容过宽会绘制到外面去，但不影响整体布局，列也不会将绘制出去的部分隐藏。
columns:每一列的宽度 || 列数 若设置列数则会自动分配宽度，若设置宽度则会自动分配列数将容器填满。 column-gap：设置或检索对象的列与列之间的间隙 column-rule：宽度 样式 颜色。设置或检索对象的列与列之间的边框 column-span：设置或检索对象元素是否横跨所有列(firefox 不支持) column-fill：设置或检索对象所有列的高度是否统一（听说目前只有 firefox 支持没测试出过效果） column-break-before：设置或检索对象之前是否断行 column-break-after：设置或检索对象之后是否断行 column-break-inside：设置或检索对象内部是否断行