Question

我注意到Google Chrome和IE 10中的CSS列并不总是统一在顶部。

enter image description here

页面来源是

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <title>Test Headings in CSS Columns</title>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
    <style type="text/css">
      #container {
        column-count: 2;
        -moz-column-count: 2;
        -webkit-column-count: 2;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <h2>Lorem</h2>
      <p>
        ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
        nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
        erat volutpat. Ut wisi enim ad minim veniam, quis nostrud
        exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
        ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit
        in vulputate velit esse molestie consequat, vel illum dolore eu
        feugiat nulla facilisis at vero eros et accumsan et iusto odio
        dignissim qui blandit praesent luptatum zzril delenit augue duis
        dolore te feugait nulla facilisi. Nam liber tempor cum soluta
        nobis eleifend option congue nihil imperdiet doming id quod
        mazim placerat facer possim assum. Typi non habent claritatem
        insitam; est usus legentis in iis qui facit eorum claritatem.
        Investigationes demonstraverunt lectores legere me lius quod
        ii legunt saepius. Claritas est etiam processus dynamicus, qui
        sequitur mutationem consuetudium lectorum. Mirum est notare
        quam littera gothica, quam nunc putamus parum claram,
        anteposuerit litterarum formas humanitatis per seacula quarta
        decima et quinta decima. Eodem modo typi, qui nunc nobis
        videntur parum clari, fiant sollemnes in futurum.
      </p>
      <h2>Sed ut</h2>
      <p>
        perspiciatis, unde omnis iste natus error sit voluptatem
        accusantium doloremque laudantium, totam rem aperiam eaque ipsa,
        quae ab illo inventore veritatis et quasi architecto beatae
        vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia
        voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur
        magni dolores eos, qui ratione voluptatem sequi nesciunt,
        neque porro quisquam est, qui dolorem ipsum, quia dolor sit
        amet, consectetur, adipisci[ng] velit, sed quia non numquam [do]
        eius modi tempora inci[di]dunt, ut labore et dolore magnam
        aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum
        exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid
        ex ea commodi consequatur? Quis autem vel eum iure reprehenderit,
        qui in ea voluptate velit esse, quam nihil molestiae consequatur,
        vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?
        At vero eos et accusamus et iusto odio dignissimos ducimus,
        qui blanditiis praesentium voluptatum deleniti atque corrupti,
        quos dolores et quas molestias excepturi sint, obcaecati cupiditate
        non provident, similique sunt in culpa, qui officia deserunt
        mollitia animi, id est laborum et dolorum fuga. Et harum quidem
      </p>
    </div>
  </body>
</html>

如果删除h2元素并合并段落，则列顶部的未对齐仍然存在。

这种错位有充分的理由还是CSS实施中的错误/故障？

Answer 1

应用此css

 h2
{
    margin:0;
}

所以基本上您需要重置h2代码

工作codepen

Answer 2

向第二列添加</p>是否有帮助

   <div id="container">
      <h2>Lorem</h2>
      <p>
        ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
        nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
        erat volutpat. Ut wisi enim ad minim veniam, quis nostrud
        exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
        ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit
        in vulputate velit esse molestie consequat, vel illum dolore eu
        feugiat nulla facilisis at vero eros et accumsan et iusto odio
        dignissim qui blandit praesent luptatum zzril delenit augue duis
        dolore te feugait nulla facilisi. Nam liber tempor cum soluta
        nobis eleifend option congue nihil imperdiet doming id quod
        mazim placerat facer possim assum. Typi non habent claritatem
        insitam; est usus legentis in iis qui facit eorum claritatem.
        Investigationes demonstraverunt lectores legere me lius quod
        ii legunt saepius. Claritas est etiam processus dynamicus, qui
        sequitur mutationem consuetudium lectorum. Mirum est notare
        quam littera gothica, quam nunc putamus parum claram,
        anteposuerit litterarum formas humanitatis per seacula quarta
        decima et quinta decima. Eodem modo typi, qui nunc nobis
        videntur parum clari, fiant sollemnes in futurum.
      </p>
      <h2>Sed ut</h2>
      <p>
        perspiciatis, unde omnis iste natus error sit voluptatem
        accusantium doloremque laudantium, totam rem aperiam eaque ipsa,
        quae ab illo inventore veritatis et quasi architecto beatae
        vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia
        voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur
        magni dolores eos, qui ratione voluptatem sequi nesciunt,
        neque porro quisquam est, qui dolorem ipsum, quia dolor sit
        amet, consectetur, adipisci[ng] velit, sed quia non numquam [do]
        eius modi tempora inci[di]dunt, ut labore et dolore magnam
        aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum
        exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid
        ex ea commodi consequatur? Quis autem vel eum iure reprehenderit,
        qui in ea voluptate velit esse, quam nihil molestiae consequatur,
        vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?
        At vero eos et accusamus et iusto odio dignissimos ducimus,
        qui blanditiis praesentium voluptatum deleniti atque corrupti,
        quos dolores et quas molestias excepturi sint, obcaecati cupiditate
        non provident, similique sunt in culpa, qui officia deserunt
        mollitia animi, id est laborum et dolorum fuga. Et harum quidem
      </p>
    </div>
  </body>
</html>

Answer 3

试试这个

 <h2 style="margin:0;">Lorem</h2>

Answer 4

我相信这是一个错误。 CSS列在不同的浏览器中存在很多问题。

http://zomigi.com/blog/deal-breaker-problems-with-css3-multi-columns/

对我来说，我发现在容器底部添加填充可以解决问题。我做了添加padding-bottom: 0.02px，这似乎解决了Chrome中的问题。

CSS Columns在顶部未对齐

4 个答案: