响应，动态的div行，文本为90度

Question

我试图获得这种外观。

但只能通过变换实现这一点（我认为这是问题）。找不到其他旋转文字的方法...

<div class='header-container' layout='row' layout-align='center'>

    <div flex='70' class='create-header' layout='row' layout-align='center'>
        <div ng-repeat='member in members' layout-fill layout='row' layout-align='start'>
            <div flex class='table-header'>{{member.name}}  {{member.instrument1}}</div>
            <div ng-hide="member.instrument2 == ''"class='table-header'>{{member.name}}  {{member.instrument2}}</div>
        </div>
    </div>
</div>

div.table-header {
    transform: rotate(-90deg);
    white-space: nowrap;
    /*margin-right: 40px;*/
    /*width: 13px;*/
}

Answer 1

这些编辑组合给了我一个可接受的结果 - 稍微调整一下，所以它在大屏幕上看起来正好......关键是将div上的宽度设置为大约它下方最小框的宽度。 / p>

<div flex='70' class='create-header' layout='row' layout-align='center'>
        <div ng-repeat='member in members' flex layout='row' layout-align='start'>
            <div flex class='table-header'>{{member.name}}-{{member.instrument1}}</div>
            <div flex ng-hide="member.instrument2 == ''"class='table-header'>{{member.name}}-{{member.instrument2}}</div>
        </div>
    </div>

div.table-header {
    transform: rotate(-45deg);
    white-space: nowrap;
    /*height: 140px;*/
    /*margin-right: 40px;*/
    width: 20px;
}