html - 带有进度表的并排 DIV

Question

我一直在阅读大量关于并排 div 的文章。我正在做的事情有一些微妙的错误，导致它无法正常工作。理想情况下，我想让我的 3 个 div 出现在一行上，每个占据固定数量的空间。像这样 [15%][60%][25%]

中间的 [60%] div 是进度条。我通过在一个 div 中放置一个 div 然后使用 angular ng-style 设置我的仪表百分比宽度的表达式来做到这一点。

进度表部分正在工作，但我似乎无法将它们全部放在一条线上。

    <div ng-repeat="rec in records">
      <div>
         Items
      </div>
      <div ng-style="$scope.outerObj">
         <div ng-style="rec.innerObj"></div>
      </div>
      <div>
        {{rec.complete}} of {{rec.number}}
      </div>
    </div>

$scope.outerObj 就是下面的表达式：

$scope.outerObj = {
    'display': 'inline-block',
    'border-style': 'solid',
    'width': '220px'
};

注意 - 你可能会问（就像我一样），“为什么我不能像这样将 externalObj 设为一个类并从外部 div 引用它：<div class="outerObj">？如果我这样做了，那么外部 div 边框就会消失并且你不会得到进度表的感觉。我只能通过使其也成为 ng 样式来使其工作。

rec.innerObj 看起来像这样：

rec.innerObj = {
                'width': (rec.complete ? (rec.complete / rec.number)*100 : 0) + '%',
                'background-color': 'blue',
                'height': '10px'
            };

所以有了这一切，我从来没有能够得到我想要的完整组合：

项目 [进度表] X of Y

我已将显示从“inline-block”更改为“inline”，这将所有内容放在一条线上，但是我的进度表全部搞砸了。

尝试了很多不同的组合，但我从来没有成功过，因此求助于这里的专家。

标签： htmlcss