我怎樣才能使絕對定位的轉換元素動態？

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的長度？

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)而不是rotate(270deg)由@Mr.alien評論。