Question

我试图垂直渲染列标题文本，因此列很窄。我似乎无法让文本旋转并保持在div内。

我做了一个快速的小提琴手。

https://jsfiddle.net/DaveC426914/w674sLbL/9/

我的＆＃34;问题前＆＃34; 是我的演示无法正确渲染。它重复三次数据，即三次17，三次18和三次19。我不知道为什么。

（我开始使用的准系统Angular小提琴不包含 div ng-app =＆＃34; myApp＆＃34; 所以我必须添加它或者角度从未应用。我想也许这与它有关，但是重新启动这个div会破坏应用程序。）

一旦我解决了这个问题，我的真正的问题就是我无法让文字表现出来。它应该落在100px高，20px的窄盒子里，应该相互齐平，这样他的列只有20px左右。它们的渲染宽度为100px。

<div class="table-header-cell" ng-repeat="item in headerDates">
  {{item.date}}
</div>

.table-header-cell {
    display: inline-block;
    border: 1px solid grey;
    margin: 1px 1px 5px;
    height: 30px;
    transform: rotate(-90deg);
      transform-origin: left bottom; 
    width: 100px;
}

我尝试过在div中嵌套div的变体，并将旋转应用于外部或内部div。我还尝试将宽度设置为100px，将高度设置为20px，希望它在旋转之前应用尺寸，但到目前为止还没有任何组合工作。

Answer 1

尝试将文本包装在内部div中，并将转换和边距属性应用于该文本而不是单个div上的所有宽度和旋转。

使用以下html：

<div ng-app="myApp">
 <div ng-controller="MyCtrl">
  <div class="table-header-cell" ng-repeat="item in headerDates">
   <div class="innertext">
     {{item.date}}
   </div>
  </div>
 </div>
</div>

和css：

.table-header-cell {
display: inline-block;
border: 1px solid grey;
margin: 1px 1px 5px;
width: 30px;
height:90px;
}

.table-header-cell .innertext {
transform: rotate(-90deg);
width: 150px;
margin: 0 -60px;
}

这应该可以为您提供您希望获得的结果。

如果这有帮助请标记答案并投票。感谢

Answer 2

对于角度ng-repeat问题，您需要确保您的JavaScript的加载类型为“No wrap in Body”，同时您还加载了Angular两次，因此我删除了第二次加载。

对于旋转，您不应该旋转容器，而是创建一个内部容器并在其上旋转。

<div ng-app="myApp">
    <div ng-controller="MyCtrl">
        <div class="table-header-cell" ng-repeat="item in headerDates">
            <div class="cell">
                {{item.date}}
            </div>            
        </div>
    </div>
</div>


.table-header-cell {
    display: inline-block;
    border: 1px solid grey;
    margin: 1px 1px 5px;
    height: 100px;
    width: 30px;
}

.cell {
    transform: rotate(-90deg);
    margin-left: -30px;
    margin-top: 30px;
    width: 100px;
}

以下是更正的小提琴：https://jsfiddle.net/w674sLbL/10/

希望这有帮助。

格式化div

2 个答案: