在 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中文网其他相关文章！