使用子元素旋转容器答案

【问题标题】：Rotate container with child elements使用子元素旋转容器
【发布时间】：2021-11-29 03:24:34
【问题描述】：

我正在尝试重构这个sidenav_example

这是我的 html 和 SCSS：

HTML：

<div class="sidenav-container">
  <div class="sidenav-item" *ngFor="let sidenavItem of sidenav">
    <span>{{ sidenavItem.text }}</span>
    <img [src]="sidenavItem.img" />
  </div>
</div>

SCSS：

.sidenav-container {
  position: absolute;

  .sidenav-item {
    align-items: flex-start;
    transform: rotate(270deg);
    display: flex;

    img {
      width: 5px;
      height: auto;
    }

    span {
      font-size: 2.5pt;
    }
  }
}

如果我这样做，我总是会得到这个结果my_example

感谢您的帮助！ :)

【问题讨论】：

欢迎来到 Stack Overflow！寻求代码帮助的问题必须包括在问题本身最好在Stack Snippet 中重现它所需的最短代码。见How to create a Minimal, Reproducible Example
我不完全明白，但你可以尝试给高度100vh
请澄清您的具体问题或提供其他详细信息以准确突出您的需求。正如目前所写的那样，很难准确地说出你在问什么。

标签： html css angular sass

【解决方案1】：

尝试添加：

transform: rotate(90deg);

到 .scss 中的“sidenaev-container”类

【讨论】：

那是旋转，然后调整大小，它应该可以工作