带有进度表的并排DIV

Question

我一直在阅读有关div并排div的许多文章。我正在做的事情有些微妙的问题，这阻止了它的正常运行。理想情况下，我想让我的3个div出现在一行上，每个div占用固定的空间。像这样[15％] [60％] [25％]

中间[60％] div是进度条。为此，我在div内设置了一个div，然后使用ng角样式设置了仪表的百分比宽度表达式。

进度表部分正在工作，但我似乎无法将所有内容放在一起。

    <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'
            };

因此，尽管如此，我仍然无法获得我想要的东西的完整组合：

项目[进度表] Y的X

我已经将显示从“行内块”更改为“行内”，并且将所有内容都放在一行上，但是随后进度表全部搞砸了。

许多尝试以不同的组合进行尝试，但我从未尝试过，因此请这里的专家来解决。