2017-01-23 73 views
0

我想最好是用div的,而不是用表的工作設置和無法弄清楚它是如何 在表中接近這個:http://cssdeck.com/labs/collab/la2hdfa9多格與垂直文本

但無論是用DIV和垂直文字或表格和垂直文字,我都可以得到適當的解決方案。 垂直文本應該對齊底部

任何建議,請編輯。 非常感謝您

+1

沒有人可以編輯此代碼,並提供您嘗試此代碼,但你。 – chazsolo

+0

Flexbox是你的朋友。 – Pytth

+0

你可以把你的代碼放在代碼片段中,並澄清你的問題嗎? –

回答

1

您可以使用變換做旋轉一個div,但它應定位絕對,然後設置上,並相應地離開:

.verticaltext { 
 
    transform: rotate(-90deg); 
 
    transform-origin: right, top; 
 
    -ms-transform: rotate(-90deg); 
 
    -ms-transform-origin:right, top; 
 
    -webkit-transform: rotate(-90deg); 
 
    -webkit-transform-origin:right, top; 
 
    position: absolute; 
 
    color: #ed217c; 
 
    top: 20%; 
 
} 
 

 
.first { 
 
    left: 20px; 
 
} 
 

 
.second { 
 
    left: 40px; 
 
} 
 

 
.third { 
 
    left: 60px; 
 
}
<div class="verticaltext first"> 
 
    This is a vertical text 
 
</div> 
 

 
<div class="verticaltext second"> 
 
    This is a vertical text 
 
</div> 
 

 
<div class="verticaltext third"> 
 
    This is a vertical text 
 
</div>

UPDATE:

這也可以用flex來完成:

.header, 
 
.footer { 
 
    border: 1px solid black; 
 
} 
 

 
.container { 
 
    display: flex; 
 
    flex-flow: row nowrap; 
 
} 
 

 
.inside { 
 
    width: 25%; 
 
    display: inline-block; 
 
    overflow: hidden; 
 
    line-height: 1.5; 
 
    min-width: 0; 
 
    border: 1px solid black; 
 
} 
 

 
.test { 
 
    display: inline-block; 
 
    white-space: nowrap; 
 
    transform: rotate(270deg); 
 
    -webkit-transform: rotate(270deg); 
 
} 
 

 
.test:before { 
 
    content: ""; 
 
    float: left; 
 
    margin-top: 100%; 
 
}
<div class="header">Header</div> 
 

 
<div class="container"> 
 
    <div class="inside"><span class="test">heyyyyyyyyyy</span> 
 
    </div> 
 
    <div class="inside"><span class="test">heyyyyyyyyyy</span> 
 
    </div> 
 
    <div class="inside"><span class="test">heyyyyyyyyyy</span> 
 
    </div> 
 
    <div class="inside"><span class="test">heyyyyyyyyyy</span> 
 
    </div> 
 
    <div class="inside"><span class="test">heyyyyyyyyyy</span> 
 
    </div> 
 
</div> 
 

 
<div class="footer">Footer</div>

+0

謝謝。這在定位上似乎具有挑戰性。當你看到https://jsfiddle.net/lucullus/6un9vvrc/時,你會看到我需要去的地方。任何其他想法? – Ray

+0

@射線增加了靈活的解決方案,檢查更新 – Yaser

+0

似乎我可以作爲一個基礎。 – Ray