인라인 블록 열을 수직으로 정렬하는 방법은 무엇입니까?

인라인 블록 열의 수직 정렬

display:inline-block을 사용하여 열을 생성하면 콘텐츠가 추가될 때 첫 번째 열까지, 후속 열은 수직으로 내려갑니다. 이 문제는 수직 정렬 CSS 속성을 활용하여 해결할 수 있습니다.

이 문제를 방지하려면 수직 정렬: top; 컨테이너의 CSS 선언에. 이렇게 하면 각 열의 내용에 관계없이 모든 열이 위쪽에 수직으로 정렬됩니다.

.cont span {
    display: inline-block;
    vertical-align: top;
    height:100%;
    line-height: 100%;
    width: 33.33%;
    outline: 1px dashed red; /* Just for Demo */
}

대체 접근 방식

인라인 블록을 사용하여 열을 생성하는 경우 열 사이에 공백 문제가 발생할 수 있으므로 최적의 솔루션이 아닐 수 있습니다. 열 레이아웃과 정렬을 더 효과적으로 제어할 수 있는 플렉스 박스나 CSS 그리드를 대신 사용해 보세요.

위 내용은 인라인 블록 열을 수직으로 정렬하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!