在本例中http://dabblet.com/gist/708f69e9c5352f67f514标题"第1条"被不一致地向下推，而它应该与"简介"one_answers"第2条"位于同一高度。这个差额是从哪里来的？当我将h1样式更改为h1 {margin-top: 0}时，所有标题都显示为水平对齐，但当我使用更高的值（如h1 {margin-top: 60px}）时，总是会出现不一致。这是怎么回事？我怎样才能在不出现这种令人讨厌的不一致的情况下使用边距？
代码：
.wrapper {
position: relative;
}
.left {
position: relative;
width: 380px;
}
.right {
position: absolute;
margin-left: 460px;
top: 0;
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
column-gap: 40px;
-moz-column-gap: 40px;
-webkit-column-gap: 40px;
}
h1 {
margin-top: 36px;
}
<body>
<div class="wrapper">
<div class="left">
<article>
<h1>Intro</h1>
<p>Llorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.</p>
</article>
</div>
<div class="right">
<article>
<h1>Article 1</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,.</p>
</article>
<article>
<h1>Article 1</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,.</p>
</article>
</div> <!-- ds-right -->
</div>
</body>
首先，您需要重置h1和p标记上的任何边距，如p,h1{margin:0}，然后将浮动列的容器设置为溢出：隐藏，这将容纳浮动