如何使旋转的 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中文网其他相关文章！