如何使绝对定位的变换元素动态

Question

以下是迄今为止我所拥有的：https://jsfiddle.net/uL4eeuvf/

.featured-page div {
  position: absolute;
  top: 34px;
  left: -18px;
  transform: rotate(270deg);
  background-color: #000;
  color: #fff;
  padding: 20px;
  font-size: 30px;
}

<div class="featured-page">
  <a href="/testpage">
    <img src="https://placeholdit.imgix.net/~text?txtsize=23&txt=250%C3%97250&w=250&h=250">
    <div>Testing</div>
  </a>
</div>

我的问题是，我希望div中的文本是动态的，但修改文本会使div偏离位置。例如，将文本更改为"测试页"会使其飞离父div的边缘。是否可以将其设置为添加更多的文本只会扩展子div的长度？

Answer 1

您可以使用transform origin属性从左上角定位元素：

.featured-page {
  position: relative;
}
.featured-page div {
  position: absolute;
  top: 0;
  right: 100%;
  transform-origin: 100% 0;
  transform: rotate(270deg);
  background-color: #000;
  color: #fff;
  padding: 20px;
  font-size: 30px;
  white-space: nowrap;
}

<div class="featured-page col-xs-6 col-sm-3 col-md-3 no-padding">
  <a href="/testpage">
    <img src="https://placeholdit.imgix.net/~text?txtsize=23&txt=250%C3%97250&w=250&h=250">
    <div>Testing blah</div>
  </a>
</div>

注意：

• 我还将position:relative;添加到父div中，这样子div的位置相对于.featured-page，而不是窗口
• 我添加了white-space:nowrap，所以文本保持在一行（thx@Paulie_D）
• 您也可以使用rotate(-90deg)，而不是@Mr.erial评论的rotate(270deg)