Question

到目前为止我所拥有的内容：https://jsfiddle.net/uL4eeuvf/

＆＃13;

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

＆＃13;

<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>

＆＃13;

我的问题是我希望div中的文本是动态的，但是修改文本会使div移位。例如，将文本更改为＆＃34;测试页面＆＃34;让它飞离父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中，因此子项相对于.featured-page而不是窗口。
我添加了white-space:nowrap，因此文字保留在一行（thx @Paulie_D）
您也可以使用rotate(-90deg)而不是@Mr.alien评论的rotate(270deg)。

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

1 个答案: