두 개의 인라인 블록의 div 높이가 다른 경우 왜 더 짧은 것이 컨테이너 상단에 정렬되지 않습니까? (
데모):
.container { 테두리: 1px 검정색 단색; 너비: 320px; 높이: 120px; } .작은 { 디스플레이: 인라인 블록; 너비: 40%; 높이: 30%; 테두리: 1px 검정색 단색; 배경: aliceblue; } .큰 { 디스플레이: 인라인 블록; 테두리: 1px 검정색 단색; 너비: 40%; 높이: 50%; 배경: 베이지; } 작은
div를 컨테이너 상단에 정렬하려면 어떻게 해야 하나요?
![[웹 프런트엔드] 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를 하위 요소에 적용할 수도 있습니다.