CSS3 多列布局——Columns，十天精通CSS3教程-慕课网

CSS3 多列布局——Columns

为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面，这种布局在报纸和杂志上都使用了几十年了，但要在Web页面上实现这样的效果还是有相当大的难度，庆幸的是，CSS3的多列布局可以轻松实现。接下来咱们一起学习多列布局相关的知识。

语法：

columns：<column-width> || <column-count>

多列布局columns属性参数主要就两个属性参数：列宽和列数。

参数	参数说明
<column-width>	主要用来定义多列中每列的宽度
<column-count>	主要用来定义多列中的列数

举例：要显示2栏显示，每栏宽度为200px，代码为：

columns: 200px 2;

到目前为止大部分主流浏览器都对其支持：

任务

在右侧CSS编辑器的第6-10行输入正确代码，将上例中两栏布局显示成三栏布局，每栏宽度为150px。注意每个浏览器的兼容性！

如下图所示：

温馨提示：案例相关效果要与上图一致，才算通过哦！否则请再看一下上面的知识点！

?不会了怎么办

问答
评论
笔记
代码

全部精华我要发布

宽度似乎没有用啊

最新回答 / iFlowers

因为width和padding的值已经限制了它的发展

1 回答 1244 浏览

2018-12-20

当column-width设置宽度后，column-count的width还能起作用吗

已采纳回答 / 呼哈帝

它跟先后次序是有关系的，谁在后面谁起作用，跟background和background-color一样的

3 回答 2062 浏览

2019-05-16

css3放大镜

最新回答 / ConyZhang

不是吧

2 回答 1159 浏览

2017-12-26

height没设置，高度为什么是固定的？

最新回答 / 慕大狗0656

因为里面的文字内容撑开了。

1 回答 1250 浏览

2017-12-06

① div宽度500=列宽x+列间距y，(div宽度500-列间距y) ÷ 列数3 ≈ 每列最大宽度z。在宽度500不变的情况下，自定义列宽只要≤每列最大宽度z，就能保持三列的布局；【经本人测试，最大列宽是155px】② 宽度500不变的情况下，只要自定义列宽≤每列最大宽度z，即只要自定义列宽≤155px，无论你的列宽设置是什么数值，列宽不会发生任何变化；③ 只有当div宽度或文本内容长度发生变化时，布局才会发生变化。

1 回答 1367 浏览

2017-08-19

为什么我设置高度之后他不会填满每一列之后再填第二列啊？

已采纳回答 / Pst_wac

你这个设置是div的高度，并不能设置内容里面每列的高度。对于column，CSS3规范里描述的是，各列的高度是均衡的，浏览器会自动调整每列里填充多少文本、均分文本，来使各列的高度保持均衡一致。

3 回答 1011 浏览

2017-07-16

columns的宽度感觉没用啊？

最新回答 / 慕仔3074982

<'column-width'>是一个用来暗示渲染出的最优的列宽的 <length> （长度值）。但实际的长度值可能会更宽，用来填充剩余的可用空间；也可能更窄，如果可用宽度小于所定义的列宽。长度值必须为严格的正整数，否则此声明将会失效。

1 回答 1073 浏览

2017-02-23

IE11浏览器不兼容？

已采纳回答 / 1VAN1

对啊对啊

2 回答 938 浏览

2016-08-23

ie10以下都不支持啊有什么兼容办法吗

已采纳回答 / Perona

用ie-css3.htc文件可以让IE6、IE7、IE8、，基本支持，部分不支持。祝好运~~

7 回答 1975 浏览

2022-08-10

代码、个数多

已采纳回答 / 塔塔绵羊

这个叫做venderprefix,就是前缀，不同浏览器厂商兼容w3c标准会带上自己的前缀，比如-webkit-是谷歌和safia的内容和，-moz-莫斯啦是firefox的，-o- 是opera 的 -ms-是微软ie，写这么多就是为了兼容各个类型的浏览器

2 回答 966 浏览

2022-08-10

为什么设置150px 3; 和设置成100px 3 的效果是一样的？

最赞回答 / derrick9006

源代码.columns { width: 500px; padding: 5px; border: 1px solid green; margin: 20px auto; columns: 150px 3; -webkit-columns: 100px 3; -moz-columns: 100px 3; -o-columns:100px 3; -ms-columns: 100px 3; }源代码显示width为500px当你三个设置为150 总长度为450剩下的50会平分给三个div...

2 回答 1817 浏览

2016-08-23