Question

我有一个带有垂直文字的横幅标题，我使用position: absolute;排成一行。但是，此文本是用户定义的，因此当文本更改时，对齐方式会更改。我如何进行定位，使其无论文本如何都位于左下角？

＆＃13;

.banner__wrap {
  background-color: grey;
  margin: 0 auto;
  max-width: 1180px;
  padding: 0 20px;
  height: 100vh;
  position: relative;
}

.banner__caption {
  bottom: 150px;
  background-color: red;
  left: -50px;
  max-width: 270px;
  position: absolute;
  transform: rotate(-90deg);
}

h2 {
  margin: 0;
}

h4 {
  margin: 10px 0 0;
}

＆＃13;

<div class="banner__wrap">
  <a class="banner__caption" href="www.google.com">
    <h2>this is my heading</h2>
    <h4>this is my cool subheading with a bunch of text</h4>
  </a>
</div>

＆＃13;

Answer 1

调整transform-origin并添加如下翻译：

＆＃13;

body {
 margin:0;
}

.banner__wrap {
  background-color: grey;
  margin: 0 auto;
  max-width: 1180px;
  padding: 0 20px;
  height: 100vh;
  position: relative;
}

.banner__caption {
  background-color: red;
  max-width: 270px;
  position: absolute;
  bottom:0;
  transform: rotate(-90deg) translateY(100%);
  transform-origin: bottom left;
}

h2 {
  margin: 0;
}

h4 {
  margin: 10px 0 0;
}

＆＃13;

<div class="banner__wrap">
  <a class="banner__caption" href="www.google.com">
    <h2>this heading</h2>
    <h4>this is  subheading</h4>
  </a>
</div>

＆＃13;

Answer 2

问题是左：-50px;在banner__caption类中。我不明白你为什么用减号。尝试删除它

    .banner__caption {
      bottom: 150px;
      background-color: red;
      max-width: 270px;
      position: absolute;
      transform: rotate(-90deg);
    }

Answer 3

我会使用position:fixed。类似的东西：

＆＃13;

.wrapper {
  position: fixed;
  left: 0px;
  top: 0px;
  background: red;
}

.content {
  position: absolute;
  bottom: 0px;
  transform: rotate(90deg);
  transform-origin: 0 100%;
  background: red;
  white-space: nowrap;
}
.read-up {
  -webkit-transform: rotate(180deg);
}

＆＃13;

<div class="wrapper">
  <div class="content">
   <div class="read-up">
    Content goes hereeeeeeee
   </div>
  </div>
</div>

＆＃13;

变量旋转文本的绝对位置

3 个答案: