多格与垂直文本

Question

我想最好是用div的，而不是用表的工作设置和无法弄清楚它是如何 在表中接近这个：http://cssdeck.com/labs/collab/la2hdfa9

但无论是用DIV和垂直文字或表格和垂直文字，我都可以得到适当的解决方案。 垂直文本应该对齐底部

任何建议，请编辑。 非常感谢您

Answer 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>