<p>두 개의 <code>인라인 블록</code>의 <code>div</code> 높이가 다른 경우 왜 더 짧은 것이 컨테이너 상단에 정렬되지 않습니까? (
데모): </p>
<p><br /></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>
<p><br /></p>
<p>작은 <code>div</code>를 컨테이너 상단에 정렬하려면 어떻게 해야 하나요? </p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
두 하위 div 모두에
vertical-align속성을 추가해야 합니다.만약
으아아아.small始终较短，则只需将该属性应用于.small. 그러나 가장 높은 값이 있는 경우 해당 속성을.small和.big에 적용해야 합니다.세로 정렬은 행 내부 또는 표 셀 상자에 영향을 미치며 이 속성은 다양한 값을 갖습니다. 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align을 참조하세요.
기본적으로
vertical-align는 baseline으로 설정되어 있기 때문입니다.대신
으아아아vertical-align:top사용:http://jsfiddle.net/Lighty_46/RHM5L/9/
또는 @f00644이 말했듯이
float를 하위 요소에 적용할 수도 있습니다.