CSS 旋转的垂直对齐问题

Question

我在 CSS 中遇到垂直对齐问题。我想从下到上显示内容。

我的主要目标：

内容宽度基于父级高度；
内容与父级底部对齐；
内容逆时针旋转；

我在 SO 上看到了这个 link：Vertical Alignment 和其他。很遗憾，我找不到答案。

我制作了一个示例 fiddle 来说明我的问题：vertical alignment fiddle。我的结果是：

元素宽度基于父元素宽度；
内容旋转时有间隙；

.container {
  position: absolute;
  width: 100%;
  height: 92%;
}
.side-content {
  position: relative;
  float: left;
  vertical-align: top;
  border: 2px solid rgba(255, 0, 0, 1.0);
  width: 20%;
  height: 100%;
  box-sizing: border-box;
}
.main-content {
  position: relative;
  float: left;
  vertical-align: top;
  border: 2px solid rgba(255, 0, 255, 1.0);
  width: 80%;
  height: 100%;
  box-sizing: border-box;
}
.text-content {
  border: 2px solid rgba(255, 0, 0, 1.0);
  bottom: 0;
  width: 100%;
  position: absolute;
  float: left;
  font-size: 10px;
  color: rgba(255, 102, 0, 1.0);
  transform-origin: left top 0;
  transform: rotate(-90deg);
}

<section class="container">
  <div class="side-content">
    <span class="text-content">Vertical Alignment</span>
  </div>
  <div class="main-content">
  </div>
</section>

Answer 1

试试这个，调整 transform-origin 值，并添加 translateY(100%) 和 rotate(-90deg)。

.text-content {
  ...
  transform-origin: left bottom;
  transform: rotate(-90deg) translateY(100%);
}

.container {
  position: absolute;
  width: 100%;
  height: 92%;
}
.side-content {
  position: relative;
  float: left;
  vertical-align: top;
  border: 2px solid rgba(255, 0, 0, 1.0);
  width: 20%;
  height: 100%;
  box-sizing: border-box;
}
.main-content {
  position: relative;
  float: left;
  vertical-align: top;
  border: 2px solid rgba(255, 0, 255, 1.0);
  width: 80%;
  height: 100%;
  box-sizing: border-box;
}
.text-content {
  border: 2px solid rgba(255, 0, 0, 1.0);
  bottom: 0;
  width: 100%;
  position: absolute;
  float: left;
  font-size: 10px;
  color: rgba(255, 102, 0, 1.0);
  transform-origin: left bottom;
  transform: rotate(-90deg) translateY(100%);
}

<section class="container">
  <div class="side-content">
    <span class="text-content">Vertical Alignment</span>
  </div>
  <div class="main-content">
  </div>
</section>

Answer 2

尝试将 width 更改为 auto 并将 position 更改为 fixed。

.text-content {
    ...
  width: auto;
  position:fixed;
    ...
}

CSS 旋转的垂直对齐问题

Vertical alignment issues with CSS rotate

html

css

css-transforms