旋转后定位div

编程问答 2022-08-11

问题描述

我想制作一个包含3个文本的div，将其旋转并将其放置在页面上的固定位置上。我希望它完全适合屏幕尺寸，

like this

因此，我创建了一个div，该div的高度和宽度与我所需要的相反，然后旋转它。问题是我无法在需要的位置正确放置它。 （top：0 right：40px）

这是我尝试移动div的代码。

.page {
  width: 100%;
  heigth: 100%;
  background-color: #fefefe;
}
.green-band {
  height: 90px;
  width: 100vh;
  padding: 0 30px;
  background-color: green;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transform: rotate(-90deg);
  position: fixed;
  top: 0;
  right: 40px;
}
<div class="page"></div>
<div class="green-band">
  <div class="text-inside">Text 1</div>
  <div class="text-inside">Text 2</div>
  <div class="text-inside">Text 3</div>
</div>

您能帮我弄清楚如何正确放置div吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

htmljavascriptjquerypositioning