如何使用html和css垂直創建文本？

Question

我想創建自己的網站塊是看起來像下面的圖片：

我都嘗試過，但沒有工作。我的HTML是：

<div class="timelines"> 
    <div class="timeline_div" style=" width:65px; float:left; cursor:pointer;" data-count="1"> 
     <div style="width:100%; float:left;"> 
     <div class="timeline_circle"> 
     <div class="timeline_year">2015</div> 
     <div class="timeline_month">Sep</div> 
     </div> 
     <div class="line"></div> 
     </div> 
     <div style="width: 100%; float: left; "> 
     <h4 class="timeline_heading">heading</h4> 
     </div> 
    </div> 

    <div class="timeline_div" style=" width:65px; float:left; cursor:pointer;" data-count="2"> 
     <div style="width:100%; float:left;"> 
     <div class="timeline_circle"> 
     <div class="timeline_year">2015</div> 
     <div class="timeline_month">Oct</div> 
     </div> 
     <div class="line"></div> 
     </div> 
     <div style="width: 100%; float: left; "> 
     <h4 class="timeline_heading" >BRICKWORKS, FLOORING, PLASTERING</h4> 
     </div> 
    </div> 

    <div class="timeline_div" style=" width:65px; float:left; cursor:pointer;" data-count="3"> 
     <div style="width:100%; float:left;"> 
     <div class="timeline_circle"> 
     <div class="timeline_year">2015</div> 
     <div class="timeline_month">Nov</div> 
     </div> 
     <div class="line"></div> 
     </div> 
     <div style="width: 100%; float: left;"> 
     <h4 class="timeline_heading" >BRICKWORKS, FLOORING, PLASTERING, ELECTRICAL, PLUMBING, HEATING, ALUMINIUM</h4> 
     </div> 
    </div> 

    <div class="timeline_div" style=" width:65px; float:left; cursor:pointer;" data-count="4"> 
     <div style="width:100%; float:left;"> 
     <div class="timeline_circle"> 
     <div class="timeline_year">2015</div> 
     <div class="timeline_month">Dec</div> 
     </div> 
     <div class="line"></div> 
     </div> 
     <div style="width: 100%; float: left; "> 
     <h4 class="timeline_heading" >fvbfgb</h4> 
     </div> 
    </div> 
... 
</div> 

我的CSS是：

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

在第三塊旋轉文本上面的例子是覆蓋到其他內容。 如何做到這一點？

Answer 1

.vertical-text { 
    transform: rotate(90deg); 
    transform-origin: left top 0; 
} 

來源：http://davidwalsh.name/css-vertical-text

Answer 2

你可以試試這個方法之一：

<table> 
    <tr> 
     <th><div class="rotate horizSpace">Foo</div></td> 
     <th><div class="rotate horizSpace">Bar</div></td> 
     <th><div class="rotate horizSpace">doo</div></td> 
     <th><div class="rotate horizSpace">carr</div></td> 
    </tr> 
    <tr> 
     <td>10</td> 
     <td>20</td> 
     <td>30</td> 
     <td>40</td> 
    </tr> 
</table> 

和CSS：

td {border: 1px solid #ccc; padding:5px;} 
th {background-color: #666; color: #fff; padding: 5px;} 
table { border-collapse: collapse; } 
body {font-family: verdana; font-size: 11px; } 

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

    /* also accepts left, right, top, bottom coordinates; not required, but a good idea for styling */ 
    -webkit-transform-origin: 50% 50%; 
    -moz-transform-origin: 50% 50%; 
    -ms-transform-origin: 50% 50%; 
    -o-transform-origin: 50% 50%; 
    transform-origin: 50% 50%; 
} 
.horizSpace 
{ 
    padding: 5px 0;  
} 
.rotate { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1)\9 } /* IE8 and below */ 
.rotate { filter /*\**/: progid:DXImageTransform.Microsoft.BasicImage(rotation=1)\9 } /* IE8 standards mode */ 
:root .rotate { filter: none; } /* remove hack in IE9+ */ 

Here My demo

Refer this page