旋轉文本在div的右下角

我在div中有一些文本，因爲在它周圍有一個雙重邊框也在div中。旋轉文本在div的右下角

你可以看到它住在這裏：http://jsfiddle.net/43y46/

我想放置文本旋轉90°在它右下角。

事情是這樣的：

enter image description here

我旋轉的文本應放置在在屏幕截圖中的藍色空間。

你能幫我嗎？

謝謝。

來源

2011-12-02 Bronzato

也許你可以申請一個位置是：絕對的;和一個底部：0; – Jordy

完成！ :)

http://jsfiddle.net/43y46/1/

來源

2011-12-02 11:19:57

謝謝，但這不是我正在尋找:)你旋轉了錯誤的文字。我想要的是旋轉一個新的文本（例如：版權），並將該文本置於右下角（在屏幕截圖中取代藍色）。 – Bronzato

隨着討論here使用這種風格爲您的文本跨度。

.rotate { 

/* Safari */ 
-webkit-transform: rotate(90deg); 

/* Firefox */ 
-moz-transform: rotate(90deg); 

/* IE */ 
-ms-transform: rotate(90deg); 

/* Opera */ 
-o-transform: rotate(90deg); 

/* Internet Explorer */ 
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); 

}

來源

2011-12-02 11:20:44 Maheep

謝謝，我知道，但我無法自己做，我吮吸CSS – Bronzato

是這樣的嗎？

http://jsfiddle.net/43y46/5/

來源

2011-12-02 11:23:53 ptriek

恩 - 它不工作。打破，如果你添加更多的文字... – ptriek

更新我的答案 - 它現在的作品 - 除了文本對齊頂部 - 我無法讓它與底部對齊工作... – ptriek

你做什麼並不差，幾乎可以，但它不會在IE9中旋轉。 – Bronzato

這裏是我的解決方案

<div id="content">     
    <div class="outer-gray"> 
     <div class="inner-gray">     
      @RenderBody() 
      <div class="rotate">Text rotated here</div> 
     </div>       
    </div> 
</div>

而CSS

.rotate 
{  
    position: absolute; 
    right: -20px; 
    bottom: 5px;  
    font-size: 10px; 
    color: #cccccc; 
    padding-top: 70px; 

    /* Safari */ 
    -webkit-transform: rotate(-90deg); 
    /* Firefox */ 
    -moz-transform: rotate(-90deg); 
    /* IE */ 
    -ms-transform: rotate(-90deg); 
    /* Opera */ 
    -o-transform: rotate(-90deg); 
}

來源

2011-12-02 16:42:44 Bronzato

旋轉文本在div的右下角

回答

相關問題