webkit上multicolumn的bug和解决技巧一则

webkit开始支持多栏属性。

如：

section {
	display: block;
	height: 300px;
	-webkit-column-width: 200px;
	-webkit-column-gap: 50px;
}

我们设定了固定高度，然后分栏，每栏200px宽，每两栏间隔50px。如果内容较多，则可出现横向scrollbar。

然而实际栏宽并非一定是200px，而是会根据横向可用空间平均分配。比如横向空间为650px时，会有2栏。每栏宽300px，加上2栏间的间隔50px正好等于650px。如果横向空间为700px时，就会变成3栏，每栏宽200px，加上3栏间的2个间隔100px，正好等于700px。所以其行为有点类似min-width，即column至少200px宽（除非可用空间小于200px）。

我们也可以不指定column-width而指定column-count，与上述类似，也会根据横向可用空间平均分配。

我们也可同时指定column-width和column-count。当横向空间超过指定栏数n所需的最小宽度时（即column-width * n + column-gap * (n - 1)），会保持column-width不变。而不足时则会退化为与只指定column-width时的效果一致。
【注：Firefox下的行为与此不一致，貌似是直接忽略column-count。】

我们也可设定width。之前描述的各种自伸缩的情形，其实源于used width的变化。若width固定下来，则column-width也就固定下来了。

道理上，最简单和易于理解的方式是，设定width和column-width为相同值。如下：

section {
	display: block;
	height: 300px;
	-webkit-column-width: 200px;
	-webkit-column-gap: 50px;

	width: 200px;
}

然而较老版本的webkit存在bug，当width小于 2 * column-width + column-gap 时，会变为只有一栏。也就是说，当不足以容纳两栏时，会退化为不存在分栏情况，因此也不会有横向scrollbar，而变成了纵向scrollbar。或者未设overflow:scroll情况下就是文字交叠在一起，这显然是很糟糕的。

如何解决这个问题呢？一种比较容易想到的方式是用脚本来遍历每个元素，然后看看它的scrollHeight是否超出height，如果超过的话，说明一栏是不足以容纳其内容的，就重置其样式，设定width为2栏所需宽度。

然而这个方式显然有很大的缺陷。如果元素的内容变化，或者样式变化（如字体变大变小）就需要将width设回column-width之后重新计算。

如果不用脚本，则width就必须设置为至少2栏宽。虽然一般并没有什么问题，在某些应用场景下会有问题。例如如果要计算该元素有几栏。本来用(scrollWidth + columnGap) / (columnWidth + columnGap) 即可得到。但是对于只需一栏的情况也会返回2。

这个问题困扰了我好一阵子。直到我突然灵光一现：

section {
	display: block;
	height: 300px;
	-webkit-column-width: 200px;
	-webkit-column-gap: 50px;

	width: 450px;
	margin-left: -250px;
}
section::before {
	content: '';
	display: block;
	width: 200px;
	height: 300px;
}

这里的要点是，原先问题是，对于一个只需一栏即可容纳的元素，设定2栏宽度实际造成了多了一个空白栏。要消除这个空白栏，此路不通。那么我们就反其道行之。我们不是消除空白栏，而是通过generated content来填充这个空白栏。这样原本只有一栏的内容都至少会占两栏。对于像计算栏数这样的需求，我们就可以按常规方法计算，把结果减去1，就是真正的结果了。

评论

1 楼 ad4621 2011-08-18  

现在多栏布局遇到问题  在多栏布局下 标签怎样定位呢？？