회전된 CSS 요소가 부모의 키에 올바르게 영향을 미치게 하려면 어떻게 해야 합니까?

CSS에서 회전된 요소: 상위 높이에 올바르게 영향을 줌

CSS에서는 문서의 레이아웃이나 흐름에 영향을 주지 않고 요소를 회전하는 것이 가능합니다. . 그러나 요소가 상위 요소의 높이에 영향을 미치기 위해 회전된 텍스트가 필요한 경우 질문이 발생합니다.

다음 시나리오를 고려하세요.

<div class="container">
  <div class="statusColumn"><span>Normal</span></div>
  <div class="statusColumn"><a>Normal</a></div>
  <div class="statusColumn"><b>Rotated</b></div>
  <div class="statusColumn"><abbr>Normal</abbr></div>
</div>

다음 CSS 적용:

.statusColumn b {
  writing-mode: tb-rl;
  white-space: nowrap;
  display: inline-block;
  overflow: visible;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

회전된 텍스트가 인접한 요소와 겹치게 됩니다. 목표는 회전된 요소가 상위 요소의 높이에 올바르게 영향을 미치고 텍스트가 겹치는 것을 방지하도록 CSS를 수정하는 것입니다.

해결책

향상된 쓰기 지원 활용 -최신 브라우저의 모드에서는 속성 조합을 사용하여 솔루션을 얻을 수 있습니다.

.statusColumn {
  position: relative;
  border: 1px solid #ccc;
  padding: 2px;
  margin: 2px;
  width: 200px;
}

.statusColumn i,
.statusColumn b,
.statusColumn em,
.statusColumn strong {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  display: inline-block;
  overflow: visible;
}

이 업데이트된 CSS는 다음을 보장합니다. 회전된 요소는 상위 컨테이너의 높이를 존중하므로 텍스트가 겹치는 것을 방지하고 원하는 레이아웃을 얻을 수 있습니다.

위 내용은 회전된 CSS 요소가 부모의 키에 올바르게 영향을 미치게 하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!