javascript - 如何从下到上开始文本？

Question

如何从底部到顶部开始文本？

我需要：

我试过：

.rotated {
  writing-mode: tb-rl;
  transform: rotateZ(-270deg);
}

<div class="rotated">
  <span>5000</span><br>
  <span>3000</span><br>
  <span>2000</span><br>
  <span>1000</span>
</div>

使用<br />它可以轻松解决，但是当屏幕很小并且<div>是position: fixed;.

标签： javascripthtmlcss

Answer 1

只需更改添加项目的顺序并像这样使用 flex：

.rotated {
  display: flex;
  height: 300px;
  flex-direction: column-reverse;
}

<div class="rotated">
  <span>1000</span>
  <span>2000</span>
  <span>3000</span>
  <span>5000</span>
</div>