내 div가 왜 정렬되어 있지 않습니까?

Question

Demo. 나는 img가있는 div가 있고 placeholder가 될 이미지가없는 다른 div가 있지만 그들은 정렬되지 않습니다. 내 HTML은 마지막 div를 제외한 모든 div의 절반을 보여줍니다. demo에 문제가 표시되지만 문제는 없습니다.

HTML :

는

<div class="profile-pics"> 
    <div class="pic-thumb-box"><img src="http://i.imgur.com/EclNgPI.jpg" class="pic-thumb" /></div> 
    <div class="pic-thumb-box"><span class="pic-thumb"></span></div> 
</div> 

CSS :

.profile-pics { 
    white-space: nowrap; 
    overflow: hidden; 
    vertical-align: top 
} 
.pic-thumb-box { 
    width: 250px; 
    height: 250px; 
    border: 1px solid; 
    background: #555; 
    display: inline-block; 
    position:relative; 
} 
.pic-thumb { 
    width: 240px; 
    height: 240px; 
    margin: 0 0 0 0; 
    padding: 0 0 0 0; 
    border: none; 
} 

Answer 1

은 .PIC 엄지 {....}에

display: inline-block; 

를 추가합니다. 이 동작에 대한 이유 그것을

Answer 2

가 해결됩니다 은 .pic-thumb-box 요소는 서로 다른 유형의 .pic-thumb 요소를 포함한다는 것이다. <img> 요소는 기본적으로 inline-block 디스플레이로 작동하지만 <span> 요소는 inline 디스플레이로 동작합니다. 이렇게하면 .pic-thumb 클래스에서 <span> 요소에 너비와 높이를 적용 할 수 없습니다. 다른 답변에서 제안한대로 .pic-thumb 클래스에 display: inline-block;을 추가하면 <span> 요소에 높이와 너비를 적용하고 불일치를 수정할 수 있습니다.

Answer 3

img 주변의 공간을 제거하려면 "display : inline-block;"을 추가하십시오. .pic-thumb 클래스에. 하며`.PIC - 엄지 손가락 box` 클래스`규칙 최고 :

.pic-thumb { 
    width: 240px; 
    height: 240px; 
    margin: 0 0 0 0; 
    padding: 0 0 0 0; 
    border: none; 
    display: inline-block; 
} 

는 https://jsfiddle.net/mxevk9q6/2/

감사합니다 앤디