本章为您带来CSS3中的多列布局是什么？ columns属性的介绍（示例）具有一定的参考价值。 有需要的同学可以参考一下。 希望对您有所帮助。
1.什么是多列布局？
CSS3中出现的新的多列布局（multi-column）是对传统HTML网页中条形布局模式的有力扩展。 这种新的句型允许WEB开发人员轻松地在多列中显示文本。 我们知道，当一行文字太长时，读者阅读起来会比较困难，可能会读错行或者连读； 人们的视线从文本的一端移至另一端，然后移至下一行的开头。 如果眼睛的阅读波动太大，注意力就会减弱，很容易无法阅读。 因此，为了最大程度地利用大屏幕显示css3 两列布局，在页面设计时需要限制文本的长度，并将文本分多栏呈现，就像报纸上的新闻排版一样。 例子：
2.columns属性介绍及使用
1.创建多列（列号和列长）
无论您希望一段文本出现在多少列中，您所需要的只是两个属性：列数和列宽。
column-count属性设置具体的列数，例如：
多列布局 .demo{ width: 500px; height: 100px; margin: auto; -moz-column-count:2; /* Firefox */ -webkit-column-count:2; /* Safari and Chrome */ column-count:2; }CSS里一直有一个让我们头疼的问题，就是创建布局很麻烦。当然，有很多方式，有很多技术都可以创建各种布局，但我们总觉得CSS里应该提供一些新属性，让我们能更好的管理布局。幸运的是，CSS3里提供了一批新的创建列式布局的column属性，有了这些属性，我们不需要再使用float,clear,margin等属性进行调控，避免了很多麻烦。
登录复制
效果图：
列宽属性控制列的间距。 如果您没有为column-count 属性提供值，则浏览器会自行决定将文本划分为适当数量的列。 例子：
多列布局 .demo{ width: 500px; height: 100px; margin: auto; column-width:100px; -moz-column-width:100px; /* Firefox */ -webkit-column-width:100px; /* Safari and Chrome */ }CSS里一直有一个让我们头疼的问题，就是创建布局很麻烦。当然，有很多方式，有很多技术都可以创建各种布局，但我们总觉得CSS里应该提供一些新属性，让我们能更好的管理布局。幸运的是，CSS3里提供了一批新的创建列式布局的column属性，有了这些属性，我们不需要再使用float,clear,margin等属性进行调控，避免了很多麻烦。
登录复制
效果图：
2、多列中列之间的间隙（column-gap属性）
column-gap 属性指定列之间的间隙。 默认情况下，间隙长度为1em，但如果使用column-gap属性，则会更改默认长度值：
多列布局 .demo{ width: 500px; height: 150px; margin: auto; -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari and Chrome */ column-count:3; -moz-column-gap:40px; /* Firefox */ -webkit-column-gap:40px; /* Safari and Chrome */ column-gap:40px; }CSS里一直有一个让我们头疼的问题，就是创建布局很麻烦。当然，有很多方式，有很多技术都可以创建各种布局，但我们总觉得CSS里应该提供一些新属性，让我们能更好的管理布局。幸运的是，CSS3里提供了一批新的创建列式布局的column属性，有了这些属性，我们不需要再使用float,clear,margin等属性进行调控，避免了很多麻烦。
登录复制
效果图：
3、列边框（column-rule属性）
用法：
column-rule：边框的长度颜色样式；
column-rule属性的用法和border属性的用法有些类似，可以相应使用。
例子：
多列布局 .demo{ width: 500px; height: 150px; margin: auto; -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari and Chrome */ column-count:3; -moz-column-gap:40px; /* Firefox */ -webkit-column-gap:40px; /* Safari and Chrome */ column-gap:40px; -webkit-column-rule: 1px solid #0188FB; /* Chrome, Safari, Opera */ -moz-column-rule: 1px solid #0188FB; /* Firefox */ column-rule: 1px solid #0188FB; }CSS里一直有一个让我们头疼的问题，就是创建布局很麻烦。当然，有很多方式，有很多技术都可以创建各种布局，但我们总觉得CSS里应该提供一些新属性，让我们能更好的管理布局。幸运的是，CSS3里提供了一批新的创建列式布局的column属性，有了这些属性，我们不需要再使用float,clear,margin等属性进行调控，避免了很多麻烦。
登录复制
效果图：
4. 柱高平衡
CSS3规范描述了每列的高度是平衡的。 浏览器会手动调整每列填充的文本量，并均匀地划分文本css3 两列布局，以保持每列的高度平衡。
然而，有时，我们需要设置列的最大高度。 此时，文本内容将从第一列开始填充，然后是第二列、第三列，可能后面的列不会被填充或溢出。 因此，当为多列布局设置 height 或 max-height 属性值时，列将拉伸到指定的高度 - 无论内容有多少，是否足够或超过。
CSS3 的多列布局（列）是一个特别有用的功能，它允许 Web 后端开发人员有效地利用宽屏显示。 您会发现在很多地方都需要使用它们，特别是在需要手动平衡列高度的地方。
