旋转CSS元素时如何准确保持父级高度？-css教程-PHP中文网

旋转CSS元素时如何准确保持父级高度？

DDD

发布： 2024-12-10 16:59:14

原创

641 人浏览过

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

登录后复制

这会产生一个与其他元素重叠的旋转元素列：

How to Accurately Maintain Parent Height When Rotating CSS Elements?

目标： 实现旋转元素的大小仍然影响其父级高度的结果，从而防止出现文本重叠：

How to Accurately Maintain Parent Height When Rotating CSS Elements?

解决方案：

正如 G-Cyr 所指出的，现代浏览器为写入模式提供了良好的支持。通过将writing-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;
}

登录后复制

这段代码将旋转元素的书写模式设置为“vertical-rl”，确保旋转后文本垂直流动180 度。它还可以实现正确换行并避免文本重叠。

以上是旋转CSS元素时如何准确保持父级高度？的详细内容。更多信息请关注PHP中文网其他相关文章！