0

我在这里看到了什么？我不介意其余的段落不排列，但最上面的段落必须排列。我错过了什么？

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

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

没有规范化 CSS 的 JSFIDDLE 在此处输入图像描述

<!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>
4

2 回答 2

2

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

p:first-of-type {
    margin-top:0;
}
于 2013-02-17T17:47:52.483 回答
0

我同意 Austin 的观点，即p: first-of-type { margin-top:0; }解决了这个问题。

我解决此问题的方法是暂时删除所有 p 标签……换句话说，用没有任何 p 标签的直接“Lorem ipsum”文本填充所有列。当您立即将所有列的顶部排成一行时……这样您就可以确定这是 ap 标签格式问题。

于 2013-02-17T18:16:39.753 回答