html - CSS 旋转的垂直对齐问题

Question

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

我的主要目标:

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

我看过这个链接:Vertical Alignment和其他关于SO。很遗憾，我找不到答案。

我制作了一个示例 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>