如何使用边距正确播放css列？

Question

http://arcanatheatre.com/

在safari中,第二列显得更高.两列都以h4开头,但似乎div本身的顶部填充仅适用于第一个..或者其他东西.不确定发生了什么.它在Chrome中排成一行

Answer 1

我的理解是,目前[19/09/2012] CSS3列的实现有时会从一列的底部获取边距/填充,并将其中的一部分带到下一列.我不确切知道这是如何确定的,但是我在使用布局时遇到了问题,因为我改变了内容的数量,有时列的顶部会排成一行,有时它们不会.这有点杂乱无章.

我想出的解决方案是这样的:

对于部分(在您的情况下,'是'特征","由","表演" 等),应用这些规则:

-moz-column-break-inside:avoid;
-webkit-column-break-inside:avoid;
column-break-inside:avoid;

然后,使用填充,而不是使用边距来分隔部分.填充被认为是我们告诉它不要打破内部的部分,而边缘不是.

Answer 2

你可以很容易地看到你有填充

你.info正在运行它

去掉.info顶部的衬垫就可以了。

这一切都会发生，因为你h4已经有相同的填充。