如何讓旋轉的 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 以確保旋轉的元素正確影響其父元素的高度，從而防止文字重疊。

解決方案

利用改進的書寫支援-mode 在現代瀏覽器中，可以使用屬性組合來實現解決方案：

.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中文網其他相關文章！