컨테이너 요소 위에 인라인 블록 DIV를 정렬합니다.

Question

<p>두 개의 <code>인라인 블록</code>의 <code>div</code> 높이가 다른 경우 왜 더 짧은 것이 컨테이너 상단에 정렬되지 않습니까? (데모): </p> <p> <pre class="brush:css;toolbar:false;">.container { 테두리: 1px 검정색 단색; 너비: 320px; 높이: 120px; } .작은 { 디스플레이: 인라인 블록; 너비: 40%; 높이: 30%; 테두리: 1px 검정색 단색; 배경: aliceblue; } .큰 { 디스플레이: 인라인 블록; 테두리: 1px 검정색 단색; 너비: 40%; 높이: 50%; 배경: 베이지; }</pre> <pre class="brush:html;toolbar:false;"><div class="container"> <div class="small"></div> <div class="big"></div>

Answer 1

두 하위 div 모두에 vertical-align 속성을 추가해야 합니다.

만약.small始终较短，则只需将该属性应用于.small. 그러나 그 중 가장 높은 것이 있을 경우 해당 속성을 .small和.big에 적용해야 합니다.

으아악

세로 정렬은 인라인 또는 테이블 셀 상자에 영향을 미치며, 이 속성은 다양한 값을 갖습니다. 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align을 참조하세요.

Answer 2

기본적으로 vertical-align는 baseline으로 설정되어 있기 때문입니다.

대신 vertical-align:top 사용:

으아아아

http://jsfiddle.net/Lighty_46/RHM5L/9/

또는 @f00644이 말했듯이 float를 하위 요소에 적용할 수도 있습니다.