Question

我正在尝试为我的应用程序设置div，使其不关心内容大小，而是使用以百分比给出的大小。我现在试图解决这个问题很长一段时间了。

这是我当前布局的图片：

包含 R 9 和 R 8 的绿色元素的宽度是正确的。问题是，如果更新的内容包含的数字超过一位数，则其宽度会相应调整（如 R 10 和 R 11 所示），但是因为我的元素旋转（转换）我希望绿色元素的宽度保持不变。 R 12 的元素应该比其他元素大，但同样的问题适用于它。

总而言之，我希望红色元素的宽度不会改变绿色元素的宽度。或者，如果不可能，那么具有相同视觉效果的其他一些解决方法也可以，但前者是首选。

这是index.html：

<html ng-app="myApp">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        /*other imports*/
        <link rel="stylesheet" href="css/vertical.css">
    </head>

    <body ng-controller="MyController">
        <div class="bg-primary element" ng-repeat="element in elemnts" 
            ng-class="{width13: $first, width9: !$first}">
            <div class="element_container">
                <p class="transform270deg" ng-class="{font20: $first}">
                    <small ng-if="$first">
                        <i class="glyphicon glyphicon-play font10"></i>
                    </small>
                    {{element.label}} {{element.number}}
                </p>
            </div>
        </div>

    </body>
</html>

这是vertical.css：

.transform270deg {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
}

.element {
  display: table;
  float: left;
  margin-left: 1%;
  height: 100%;
  font-size: 10vmin;
}

.element p {
  display: block;
  white-space: nowrap;
  text-align: center;
  background-color: red;
}

.element_container {
  display: table-cell;
  vertical-align: middle;
  white-space: nowrap;
  background-color: green;
}

.width13 {
  width: 13%;
}

.width9 {
  width: 9%;
}

.font10 {
  font-size: 10vmin;
}

.font20 {
  font-size: 20vmin;
}

如何设置子宽度div divles的宽度

0 个答案: