3

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

在此处输入图像描述

页面来源是

<!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 实现中的错误/故障?

4

4 回答 4

2

应用这个 CSS

 h2
{
    margin:0;
}

所以基本上你需要重置你的h2标签

工作密码笔

于 2013-03-26T11:35:10.867 回答
0

</p>将 a 添加到第二列是否有帮助

   <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>
于 2013-03-26T11:25:28.930 回答
0

尝试这个

 <h2 style="margin:0;">Lorem</h2>
于 2013-03-26T11:38:35.567 回答
0

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

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

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

于 2015-07-03T22:07:55.763 回答