"일꾼이 일을 잘하려면 먼저 도구를 갈고 닦아야 한다." - 공자, 『논어』.
첫 장 > 프로그램 작성 > 회전 CSS 요소가 학부모 요소 높이에 어떤 영향을 미칩니 까?

회전 CSS 요소가 학부모 요소 높이에 어떤 영향을 미칩니 까?

2025-04-15에 게시되었습니다
검색:971

How Can I Make Rotated CSS Elements Correctly Influence Their Parent's Height?

다음 시나리오를 고려하십시오 :

.
normal
회전
정상

다음 css를 적용합니다 :

. StatersColumn B { 작문 모드 : TB-RL; 흰색 공간 : Nowrap; 디스플레이 : 인라인 블록; 오버플로 : 가시; 변환 : 회전 (-90deg); 변환-오리진 : 50% 50%; }

는 주변 요소가 겹치는 회전 텍스트를 초래합니다. 목표는 회전 된 요소가 부모의 높이에 올바르게 영향을 미쳐 텍스트 중첩을 방지하기 위해 CSS를 수정하는 것입니다.
Normal
Rotated
Normal

Normal
Rotated
Normal

.

. 위치 : 상대; 국경 : 1px Solid #CCC; 패딩 : 2px; 여백 : 2px; 너비 : 200px; } .Statuscolumn I, .Statuscolumn B, .Statuscolumn em, .Statuscolumn Strong { 작문 모드 : 세로 -RL; 변환 : 회전 (180deg); 흰색 공간 : Nowrap; 디스플레이 : 인라인 블록; 오버플로 : 가시; }
Normal
Rotated
Normal
이 업데이트 된 CSS는 회전 된 요소가 부모 컨테이너의 높이를 존중하여 텍스트 중첩을 방지하고 원하는 레이아웃을 달성합니다.

최신 튜토리얼 더>

부인 성명: 제공된 모든 리소스는 부분적으로 인터넷에서 가져온 것입니다. 귀하의 저작권이나 기타 권리 및 이익이 침해된 경우 자세한 이유를 설명하고 저작권 또는 권리 및 이익에 대한 증거를 제공한 후 이메일([email protected])로 보내주십시오. 최대한 빨리 처리해 드리겠습니다.

Copyright© 2022 湘ICP备2022001581号-3