Question

在此示例http://dabblet.com/gist/708f69e9c5352f67f514中，标题“第1条”不一致地被按下，而它应该出现在与“简介”和“第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>

Answer 1

首先，你需要重置h1和p标签上的任何边距，如p,h1{margin:0}，然后设置浮动列的容器溢出：隐藏，这将容纳浮动< / p>

标题中不一致的边距来自何处？

1 个答案: