在 CSS 中如何防止旋轉的內聯元素影響其父元素的高度？

CSS 中影響父元素高度的旋轉元素

對內聯元素應用旋轉時，確保父元素的高度不會受到不利影響至關重要。考慮這樣的場景：我們有多個帶有文字的列，並且希望旋轉其中一些。

範例:

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

<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>

（之前）:
[旋轉文字與其他文字重疊的圖像列]

（所需）：
[在其自己的列中旋轉文字的圖像，不與其他欄位重疊]

解

利用書寫-模式和旋轉，我們可以實現這個期望效果：

.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;
}

<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 中如何防止旋轉的內聯元素影響其父元素的高度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！