0

私はここで何を見ていますか？残りの段落が並んでいなくてもかまいませんが、一番上の段落は並んでいる必要があります。私は何が欠けていますか？

OSXMountainLionのブラウザFx19およびChrome24フルスクリーン

注：自動的に挿入される正規化された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

私はオースティンに同意します。p：first-of-type {margin-top：0; }は問題を修正します。

この問題をトラブルシューティングするための私のアプローチは、すべてのpタグを一時的に削除することでした。つまり、すべての列に、pタグのないまっすぐな「Loremipsum」テキストを入力しました。これを行うと、すべての列の一番上がすぐに整列します...そうすれば、apタグのフォーマットの問題であることが確実にわかります。

于 2013-02-17T18:16:39.753 に答える