CSS diaplay 인라인 블록 상단 맞춤

Question

두 개의 열에 별도의 상자로 표시하려는 div가 거의 없습니다.

HTML :

<div class="short-desk"> 
    <p>BOX 1</p> 
</div> 

<div class="short-desk"> 
    <p>BOX 2</p> 
</div> 
... 

CSS :

.short-desk { 
    display: inline-block; 
    width: 42%; 
    height: 180px; 
    border:1px solid #000; 
} 

결과 :

나는 css diaplay : 인라인 블록 속성을 사용하려고했으나 정렬에 약간의 문제가 있습니다. 한 줄에 2 개의 상자가 같은 레벨에 있지 않습니다.

실제로 작은 텍스트는 내부에서 잘 작동하지만 긴 텍스트를 조금 넣으면 레벨이 변경되고 서로 일치하지 않습니다.

데모 여기를 참조하십시오 :

http://jsfiddle.net/zur4ik/TUGup/1/

가 어떻게이 문제를 해결할 수 있습니까?

Answer 1

사실, 당신은 실수로 귀하의 질문 제목에서 솔루션을 배치.

.short-desk { 
    vertical-align:top; 
} 

가 여기 updated JSFiddle이다 : 당신의 정의에이 스타일을 추가

는

의도 된 동작을 줄 것으로 보인다.

귀하가 찾고자하는 것이 아닌 경우 알려 주시면 더 자세히 도와 드리겠습니다.

Answer 2

font-size:0을 본문에 놓고 div 사이의 공백을 제거하고 overflow:hidden을 상자에 넣습니다.

http://jsfiddle.net/TUGup/2/

Answer 3

그냥 overflow:hidden;이 같은 클래스 short-desk에 추가 : -

.short-desk { 
    display: inline-block; 
    width: 42%; 
    height: 180px; 
    border:1px solid #000; 
    overflow:hidden;   // Add this 
} 

FIDDLE LINK