配售垂直旋轉文本DIV中

可能重複：
How to draw vertical text with CSS cross-browser?配售垂直旋轉文本DIV中

我有一些div，應該是一個架子上「書」。所有的div應該是一個鏈接，而在某些情況下，他們將有圖像的背景，在另外一些國家，他們不會在這些情況下，我需要把標題一樣，如果是，那麼，一本書，所以文字應旋轉90º。我不知道該如何做，只需旋轉<a>中的文字，而不旋轉整個div。

<div class="magazinebookcase">   

<div class="books"> 
<a title="Mag1" style="height:286px;width:16px;" href="">Book 1 
</a> 
</div> 
<div class="books"> 
<a title="Mag2" style="height:258px;width:48px;" href="">Book 2 
</a> 
</div> 
<div class="books"> 
<a title="Mag3" style="height:252px;width:38px;" href=""> 
</a> 
</div> 
<div class="books"> 
<a title="Mag4" style="height:258px;width:50px;" href=""> 
</a> 
</div>  
<div class="books"> 
<a title="Mag5" style="height:284px;width:14px;" href=""> 
</a> 
</div> 

<div class="clearfix"></div>

而CSS：

.magazinebookcase { 
width: 100%; 
padding: 3px; 
vertical-align:bottom; 

} 

.magazinebookcase .clearfix { 
clear:both; 
} 

.magazinebookcase .books { 
text-align:center; 
display: table-cell; 
vertical-align: bottom; 
} 

.magazinebookcase a { 
border: 1px solid #000; 
display: block; 
word-break: break-all; 
} 

.magazinebookcase a:hover { 
background-color: #ccc; 
}

http://jsfiddle.net/7vEdw/2/

來源

2012-11-05 Ikzer

的http：//計算器。 com/questions/1080792 /如何繪製垂直文本與CSS跨瀏覽器 – mortb

-1

把內容要在其中旋轉，然後你可以使用CSS旋轉它的跨度。 e.g

<span class="rotate">Book 1</span> 
<span class="rotate">Book 2</span> 
<span class="rotate">Book 3</span> 
<span class="rotate">Book 4</span>

和CSS

.rotate{ 
-webkit-transform: rotate(-90deg); 
-moz-transform: rotate(-90deg); 
}

希望工程:)

來源

2012-11-05 11:36:54 Ankush

不工作..... –

我希望這將幫助你： -

HTML

<!DOCTYPE html> 
<html> 
<head> 

</head> 

<body> 
<div class="magazinebookcase">   

    <div class="books"> 
    <a title="Mag1" style="height:286px;width:16px;" href="">Book 1 
    </a> 
    </div> 
    <div class="books"> 
    <a title="Mag2" style="height:258px;width:48px;" href="">Book 2 
    </a> 
    </div> 
    <div class="books"> 
    <a title="Mag3" style="height:252px;width:38px;" href=""> 
    </a> 
    </div> 
    <div class="books"> 
    <a title="Mag4" style="height:258px;width:50px;" href=""> 
    </a> 
    </div>  
    <div class="books"> 
    <a title="Mag5" style="height:284px;width:14px;" href=""> 
    </a> 
    </div> 

    <div class="clearfix"></div> 
</div> 
</body> 
</html>

CSS

.magazinebookcase { 
width: 100%; 
padding: 3px; 
vertical-align:bottom; 

} 

.magazinebookcase .clearfix { 
clear:both; 
} 

.magazinebookcase .books { 
text-align:center; 
display: table-cell; 
vertical-align: bottom; 
    border: 1px solid #000; 
} 

.magazinebookcase a { 

display: block; 
word-break: break-all; 
    color: #000; 
    -moz-transform:rotate(30deg); 
} 

.magazinebookcase a:hover { 
background-color: #ccc; 
}

DEMO

對於每一個鏈接，你將不得不做出不同的類，這是爲你演示..按您的要求....

來源

2012-11-05 11:42:03

配售垂直旋轉文本DIV中

回答

相關問題