css为html标记语言提供了一种样式描述，定义了其中元素的显示方式。css在web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。css里一直有一个让我们头疼的问题，就是创建布局很麻烦。当然，有很多方式，有很多技术都可以创建各种布局，但我们总觉得css里应该提供一些新属性，让我们能更好的管理布局。幸运的是，css3里提供了一批新的创建列式布局的column属性，有了这些属性，我们不需要再使用float,clear,margin等属性进行调控，避免了很多麻烦。
CSS代码
CSS3里的column系列属性提供了各种不同的功能，通过组合使用它们，你能得到相应的任何分栏式布局：
column-count: 列数目
column-gap: 各列之间间隙宽度
立即学习“前端免费学习笔记（深入）”；
column-width: 建议宽度；未必会使用，浏览器基于此数值进行计算
column-rule-width：列之间分割线宽度
column-rule-style：列之间分割线风格
column-rule-color：列之间分割线演示
column-span: 允许一个元素的宽度跨越多列
column-fill: 分列方式
要想制作出一个漂亮的分列布局，你至少需要用到column-count和column-gap：
/* 3 列，每列之间10px间距 */ul.col-3 {
column-count: 3;column-gap: 10px;}
登录后复制
如果你想美化一下列之间的空隙，这也很简单：
/* 3 列，每列之间10px间距 ，带有金色的隔离线 */ul.col-3 {
column-count: 3;column-gap: 10px;column-rule: 1px solid #fc0;}
登录后复制
指定的元素还可以横跨多列：
/* 以下面的HTML为例:
表头!
列 1列 2列 3列 4列 5列 6列 7列 8列 9列 10列 11列 12
登录后复制
*/div.col-3 {column-count: 3;column-gap: 5px;}div.col-3 h2 {column-span: all;text-align:center;background: #eee;}
登录后复制
非常的简单，而且显示结果完全符合我们的预期！
使用CSS3的columns制作页面布局有很多优势：你不需要计算宽度，你不需要担心内容是否会撑破布局，这些数学问题系统都会帮你计算。还有一个，那就是清晰整洁的语义。
以上内容就是关于css3的columns制作页面布局，希望对大家有帮助。
相关推荐：
怎样用CSS3和JS做出上升的方块动态背景
怎样用CSS3和JS做出上升的方块动态背景
怎样用CSS3和JS做出上升的方块动态背景
以上就是CSS3 Columns好用的分列式布局的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3121319.html
