標題中的不一致邊距從哪裏來？

在本例http://dabblet.com/gist/708f69e9c5352f67f514中，標題「Article 1」不一致地被推下，而它應該與「Intro」和「Article 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>

來源

2014-08-27 Madamadam

像下面這樣[Link]（http://dabblet.com/gist/466ed90e18afea9d0956）？ – Malcolm 2014-08-27 21:46:51

不，當爲h1的margin-top添加一個77px的值（例如）時，不一致會重新出現。 – Madamadam 2014-08-27 21:58:18

首先，你需要重新對h1和p標籤，像這樣p,h1{margin:0}任何保證金，然後在容器中設置爲浮動列溢出：隱藏這將容器中的彩車

來源

2014-08-27 18:37:59

我不明白你的答案：你能設置一個我的例子dabblet的副本嗎？ – Madamadam 2014-08-27 19:12:50

好吧，我明白了。你的解決方案有效以下是一些背景信息：http://colinaarts.com/articles/the-magic-of-overflow-hidden/ – Madamadam 2014-08-27 21:53:53

標題中的不一致邊距從哪裏來？

回答

相關問題