Question

我在这看到什么？我不介意其他段落不排队，但最重要的是必须。我错过了什么？

OSX Mountain Lion上的浏览器Fx 19和Chrome 24全屏

注意：由于自动插入的标准化css，它会在jsfiddle中消失

JSFIDDLE without normalised CSS enter image description here

<!DOCTYPE html>
<html>
<head>
<style>
#multicolumn { 
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
 column-count:3; 
-moz-column-gap: 10px;
-webkit-column-gap: 10px;
column-gap: 10px;
-moz-column-rule: 1px solid #000;
-webkit-column-rule: 1px solid #000;
column-rule:1px solid #000;
}
</style>
</head>
<body>
<div id="multicolumn"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nulla lorem, tincidunt in pulvinar non</p>
<p>Suspendisse est odio, porttitor non semper porttitor, sagittis in enim. Aenean mollis elit dapibus</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; </p>
<p>Etiam imperdiet suscipit odio, posuere ultrices diam porttitor nec. In tincidunt iaculis neque</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porta consectetur sapien, </p>
<p>Donec tortor mauris, congue sit amet imperdiet sed, vehicula vel eros.</p>
<p>Curabitur porttitor mattis felis et placerat. Nulla facilisi. Curabitur varius imperdiet sapien,</p>
<p>in vulputate quam auctor id. In quis eros eget sapien dignissim porttitor.</p>
<p> In hac habitasse platea dictumst. Nulla ut lorem sed felis blandit pretium.</p>
<p> Donec eget turpis ac ante gravida aliquet at nec magna.</p>
<p> Curabitur eleifend massa id sapien iaculis scelerisque. </p>
<p>Sed interdum, sapien ac laoreet tempus, orci turpis tristique sapien, </p>
<p>at ultrices dolor nulla eget dui. Vivamus sit amet turpis et erat vehicula tincidunt. Etiam a sodales neque.</p>
</div>
</body>
</html>

Answer 1

<p>元素默认有一些上边距。添加CSS规则以重置第一段，如下所示：

p:first-of-type {
    margin-top:0;
}

Answer 2

我同意Austin的观点 p：first-of-type {margin-top：0; } 修复了这个问题。

我解决这个问题的方法是暂时删除所有p标签...换句话说，用直接的“Lorem ipsum”文本填充所有列，没有任何p标签。当你这样做时，所有列的顶部立即排队......所以这样你肯定知道这是一个p标签格式问题。

第一项的多列问题

2 个答案: