인라인 블록의 수직 위치

Question

이 질문은 단어로 설명하기 어려워서 jsFiddle에 연결합니다. jsFiddle. 링크 중 하나를 보면 다른 레벨에있는 상자가 표시됩니다. 이것들은 화면을 가로 지르도록 배열되어 있습니다. here처럼 볼 수 있습니다. 요소 위에서 요소가 수직 간격을 이루지 못하게하고 올바르게 바둑판 식으로 배열하지 못하게하려면 어떻게해야합니까? 나는 각기 다른 높이를 가진 각 요소 내용들로 인해 발생한다고 생각하지만, 그것을 고치는 법을 모른다.
HTML :

이

<div id="elements"> 
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id nunc ut erat facilisis pharetra. Sed egestas gravida mattis.</div> 
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu lectus eu purus pulvinar tincidunt. Phasellus at elit id nulla volutpat gravida sit amet vitae lorem. Nunc mattis venenatis varius. Aenean nec odio lorem. Nulla in turpis sed velit venenatis lacinia eget id ante. Maecenas quis massa nunc.</div> 
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> 
</div> 

CSS :

#elements div { 
    display:inline-block; 
    width:250px; 
    height:250px; 
    border:solid thin #000; 
} 

Answer 1

는 CSS 규칙에 vertical-align: top; 추가 다음은 jsFiddle에서 찾을 수있는 코드입니다.

Answer 2

해결 방법이 많이 있습니다. 내가 인라인 블록 요소의 경우 생각하는 어느

#elements div { 
    display:inline-block; 
    width:250px; 
    height:250px; 
    border:solid thin #000; 
    float:left; 
} 

또는 vertical-align: top; buyt로 삼았 이러한 요소를 떠 당신이에 재설정을 적용하지 않은 경우 하나 그 또한 모든 중단 점에서 지속되지 것보다 강력 후로트 신체.