Откуда возникают непоследовательные поля в заголовках?

В этом примере 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>

источник

2014-08-27 Madamadam

Что-то вроде следующего [Ссылка] (http://dabblet.com/gist/466ed90e18afea9d0956)? – Malcolm

Нет, при добавлении значения 77px (например) для margin-top h1, снова появляются несоответствия. – Madamadam

Сначала вам нужно будет установить любой запас на h1 и p теги, как так p,h1{margin:0} затем установите контейнер для перемещаемого колонны переполнения: скрытый, который будет контейнером поплавки

источник

2014-08-27 18:37:59

Я не понимаю ваш ответ: не могли бы вы создать копию моего примера dabblet? – Madamadam

Хорошо, я понял. Ваше решение работает. Вот некоторая справочная информация: http://colinaarts.com/articles/the-magic-of-overflow-hidden/ – Madamadam

Откуда возникают непоследовательные поля в заголовках?

ответ

Смежные вопросы