내부 div가 정렬되지 않는 이유는 무엇입니까?

Question

바이올린은 내부 DIV의의 모든 외부 사업부의 상단에 정렬하지 않은 이유를 잘 모르겠어요

#outer-container { 
    border-top: 2px solid black; 
    border-bottom: 2px solid black; 
    background-color: #f0f0f0; 
    padding-top: 5px; 
    padding-bottom: 5px; 
    overflow-x: scroll; 
    white-space: nowrap; 
    } 
    #outer-container .inner-container { 
    width: 75vw; 
    min-height: 100px; 
    border: 1px solid black; 
    display: inline-block; 
    } 

    <div id="outer-container"> 
    <div class="inner-container"> 
     <div>a</div> 
    </div> 
    <div class="inner-container"> 
     <div>b</div><div>bb</div> 
    </div> 
    <div class="inner-container"> 
    </div> 
    </div> 

http://jsfiddle.net/t4u1agwv/

아래 링크. 어떤 도움을 주셔서 감사합니다!

Answer 1

요소가 inline이므로 vertical-align 속성을 사용하여이 문제를 해결할 수 있습니다.

이 속성의 기본값은 baseline입니다. 그래서 첫 번째 요소는 두 번째 요소의 텍스트의 기본에 정렬됩니다. 속성을 top/middle/bottom과 같은 값으로 변경하면 변경됩니다.

Updated Example

#outer-container .inner-container { 
    width: 75vw; 
    min-height: 100px; 
    border: 1px solid black; 
    display: inline-block; 
    vertical-align:top; 
}