我想最好是用div的,而不是用表的工作設置和無法弄清楚它是如何 在表中接近這個:http://cssdeck.com/labs/collab/la2hdfa9多格與垂直文本
但無論是用DIV和垂直文字或表格和垂直文字,我都可以得到適當的解決方案。 垂直文本應該對齊底部
任何建議,請編輯。 非常感謝您
我想最好是用div的,而不是用表的工作設置和無法弄清楚它是如何 在表中接近這個:http://cssdeck.com/labs/collab/la2hdfa9多格與垂直文本
但無論是用DIV和垂直文字或表格和垂直文字,我都可以得到適當的解決方案。 垂直文本應該對齊底部
任何建議,請編輯。 非常感謝您
您可以使用變換做旋轉一個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>
沒有人可以編輯此代碼,並提供您嘗試此代碼,但你。 – chazsolo
Flexbox是你的朋友。 – Pytth
你可以把你的代碼放在代碼片段中,並澄清你的問題嗎? –